How do I change the underline of a material ui tab

Question

I want to change the underline of:

I use material ui version 4.12.3

The code for creating my tabs is here:

function renderTabs(): JSX.Element {
return (
  <Tabs className={classes.tabBar} value={activeTab} component={Paper} onChange={handleChange} centered>
    {TABS.map((tab: string) => {
      return (
        <Tab
          className={classes.tabButton}
          key={`tab-${tab}`}
          label={tab}
          value={tab}
          component={Link}
          to={`${url}/${tab !== TABS[0] ? tab : ''}`}
        />
      )
    })}
  </Tabs>
)

}

and in my tab_menu.style.ts I have the following code:

export default makeStyles(() =>
  createStyles({
    root: { width: '60%', margin: 'auto' },
    tabBar: {},
    tabButton: {},
  })
)

I tried to change colors/background colors/text decorations in the tabBar as well as the tabButton, but the blue underline never changed. How can I change the underline style?

Answer 1

As per material-UI documentation (Tab API, Tabs API) , you need to pass classes instead of className as a prop. Just write classes instead className.