React导航设置单个选项卡颜色

import './styles.css'; // 引入CSS文件

render() {
  return (
    <div>
      <ul className="nav">
        <li className="tab">选项卡1</li>
        <li className="tab">选项卡2</li>
        <li className="tab active">选项卡3</li> {/* 设置active类名来表示当前选中的选项卡 */}
        <li className="tab">选项卡4</li>
      </ul>
    </div>
  );
}

.nav {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.tab {
  display: inline-block;
  padding: 10px;
  margin-right: 10px;
  cursor: pointer;
}

.active {
  background-color: #ff0000; /* 设置选中选项卡的背景颜色为红色 */
  color: #ffffff; /* 设置选中选项卡的文字颜色为白色 */
}

render() {
  return (
    <div className="container">
      {/* 导航选项卡 */}
    </div>
  );
}

render() {
  const tabStyle = {
    // 样式对象
  };

  return (
    <div>
      <ul>
        <li style={tabStyle}>选项卡1</li>
        {/* 其他选项卡 */}
      </ul>
    </div>
  );
}