I have Vertical Tabs and need to apply additional class [say my-custom-class] when tab is changed clicked, I am very new to this CSS stuff kindly guide.
const handleChange = (event: React.SyntheticEvent, newValue: number) => {
console.log('check thissssss', newValue)
setValue(newValue)
}
return (
<CustomVerticalTabs theme={theme} className="u-vertical-tabs">
<Tabs className="tab-list-vertical"
orientation="vertical"
variant="scrollable"
value={value}
onChange={handleChange}
aria-label="Vertical tabs example"
sx={{
[`& .${tabsClasses.scrollButtons}`]: {
'&.Mui-disabled': { opacity: 0.3 },
},
}}
>
{items.map((item, index) => (
<Tab className="u-tab-btn" label={item.title} key={index} />
))}
</Tabs>
{items.map((item, index) => (
<TabPanel theme={theme} value={value} index={index} key={index}>
{item.content}
</TabPanel>
))}
</CustomVerticalTabs>
)
}