有没有办法在component而不是App.js中改变标签栏的样式？

import { Link } from 'react-router-dom';

function Component() {
  return (
    <div>
      <nav>
        <ul>
          <li>
            <Link to="/" className="active">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
          <li>
            <Link to="/contact">Contact</Link>
          </li>
        </ul>
      </nav>
    </div>
  );
}

import React, { useState } from 'react';

function Component() {
  const [activeTab, setActiveTab] = useState('home');

  const handleTabClick = (tab) => {
    setActiveTab(tab);
  };

  return (
    <div>
      <nav>
        <ul>
          <li className={activeTab === 'home' ? 'active' : ''} onClick={() => handleTabClick('home')}>
            Home
          </li>
          <li className={activeTab === 'about' ? 'active' : ''} onClick={() => handleTabClick('about')}>
            About
          </li>
          <li className={activeTab === 'contact' ? 'active' : ''} onClick={() => handleTabClick('contact')}>
            Contact
          </li>
        </ul>
      </nav>
    </div>
  );
}