I am currently utilizing the Tab feature from Semantic UI for a table header. Upon inspecting it in Developer tools, I noticed that the selected tab contains an additional element active besides its regular class elements.
Here is the code snippet:
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>
);
Upon inspection, the selected tab has the classes: active item tab-title, whereas the unselected one has item tab-title.
Is there a way to manipulate this in the code? For example, changing the background URL based on the presence of the active class.