Apply multiple CSS classes to Vertical Tab React-ts

Viewed 33

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>
  )
}
1 Answers
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 ${index === value ? 'my-custom-class' : ''}`} label={item.title} key={index} />
        ))}
      </Tabs>
      {items.map((item, index) => (
        <TabPanel theme={theme} value={value} index={index} key={index}>
          {item.content}
        </TabPanel>
      ))}
    </CustomVerticalTabs>
  )
}
Related