title: Apply multiple CSS classes to Vertical Tab React-ts
body: <p>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.</p>
  <pre><code>const handleChange = (event: React.SyntheticEvent, newValue: number) =&gt; {
      console.log('check thissssss', newValue)
      setValue(newValue)
    }
  
    return (
      &lt;CustomVerticalTabs theme={theme} className=&quot;u-vertical-tabs&quot;&gt;
        &lt;Tabs className=&quot;tab-list-vertical&quot; 
          orientation=&quot;vertical&quot;
          variant=&quot;scrollable&quot;
          value={value}
          onChange={handleChange}
          aria-label=&quot;Vertical tabs example&quot;
          sx={{
            [`&amp; .${tabsClasses.scrollButtons}`]: {
              '&amp;.Mui-disabled': { opacity: 0.3 },
            },
          }}
        &gt;
          {items.map((item, index) =&gt; (
            &lt;Tab className=&quot;u-tab-btn&quot; label={item.title} key={index} /&gt;
          ))}
        &lt;/Tabs&gt;
        {items.map((item, index) =&gt; (
          &lt;TabPanel theme={theme} value={value} index={index} key={index}&gt;
            {item.content}
          &lt;/TabPanel&gt;
        ))}
      &lt;/CustomVerticalTabs&gt;
    )
  }
  </code></pre>