Javascript 检查单击选项卡时css类是否已更改

我用的是桌子的顶部。它包含更多的选项卡，我在开发人员工具中注意到，所选的选项卡在其普通类元素旁边包含一个新元素

active

代码如下：

 const panes = [
      {
        menuItem: (
          <Menu.Item
            className="tab-title"
            key="Reference"
            style={{
              display: 'block',
              background:'url(https://svgshare.com/i/Nnu.svg) left center no-repeat',
              backgroundSize: 'cover',
              minWidth: 292,
              borderColor: 'transparent',
            }}>
            <p>Reference</p>
          </Menu.Item>
        ),
        render: () => <Tab.Pane>{referenceTab}</Tab.Pane>,
      },
      {
        menuItem: (
          <Menu.Item
            className="tab-title"
            key="List"
            style={{
              display: 'block',
              background:'url(https://svgshare.com/i/Nnu.svg) left center no-repeat',
              backgroundSize: 'cover',
              minWidth: 300,
              borderColor: 'transparent',
            }}>
            <p>List</p>
          </Menu.Item>
        ),
        render: () => <Tab.Pane>{listTab}</Tab.Pane>
      },
    ];

    return (
      <Layout>
          <TabContainer panes={panes} />
      </Layout>
    );

const窗格=[
{
菜单项：(
参考文献

),
呈现：（）=>{referenceTab}，
},
{
菜单项：(
名单

),
呈现：（）=>{listTab}
},
];
返回(
);

在检查模式下，所选选项卡具有此类：

活动项目选项卡标题

，而非所选选项卡具有

项目选项卡标题

---

有没有办法在代码中使用它？例如，如果类包含

active

您可以使用

元素.classList.contains（“active”）

，我想用另一个更改背景url。 .

编辑： 或者，您可以添加css，如下所示

.active.tab-title{
背景色：红色；
}

您可以使用

元素.classList.contains（“活动”）

。 .

编辑： 或者，您可以添加css，如下所示

.active.tab-title{
背景色：红色；
}

尝试以下方法动态设置css属性

style={{          
  background-color: ${active ? 'red' : 'blue'},         
}}>

---

尝试这样的方法动态设置css属性

style={{          
  background-color: ${active ? 'red' : 'blue'},         
}}>

---

我可以在

style={…}

内部使用它吗？我可以在

style={…}

内部使用它吗？