My Requirement is such that only the active tab should have a specific color and font-size.

This is my code:

                    <Tabs
                        value={value}
                        onChange={handleChange}
                        classes={{indicator: classes.customStyleOnActiveTab}}
                        aria-label="some text"
                        >
                        <Tab label={<span className={classes.customStyleOnTab}>Tab 1</span>} />
                        <Tab label={<span className={classes.customStyleOnTab}> Tab 2</span>}/>
                    </Tabs>

However, it changes the styling on both the tabs whereas I want only the active tab to have a particular style (blue color and bold font). The other tab should have a normal font-weight and color:

If I use textColor property, I can achieve the desired result but I wouldn't be able to customize it. I dug into the material doc, and eventually tried all the CSS classes they've exposed, without any luck

My Requirement is such that only the active tab should have a specific color and font-size.

This is my code:

                    <Tabs
                        value={value}
                        onChange={handleChange}
                        classes={{indicator: classes.customStyleOnActiveTab}}
                        aria-label="some text"
                        >
                        <Tab label={<span className={classes.customStyleOnTab}>Tab 1</span>} />
                        <Tab label={<span className={classes.customStyleOnTab}> Tab 2</span>}/>
                    </Tabs>

However, it changes the styling on both the tabs whereas I want only the active tab to have a particular style (blue color and bold font). The other tab should have a normal font-weight and color:

If I use textColor property, I can achieve the desired result but I wouldn't be able to customize it. I dug into the material doc, and eventually tried all the CSS classes they've exposed, without any luck

• javascript
• reactjs
• material-ui

• "and eventually tried all the CSS classes they've exposed" - where are you using these CSS classes? Do your new style rules' selectors have the minimum specificity required to override the existing rules? If nothing else, there's always !important. – Dai Commented Sep 24, 2020 at 10:10
• @Dai unfortunately !important diesnt do the job (say if I try to override, wrapper class; it simply throws a warning on console saying you can't override it) since following are the only classes on which I can put my cusom css: root,vertical,flexContainer,flexContainerVertical,centered,scroller,fixed,scrollable,scrollButtons,scrollButtonsDesktop,indicator. I was trying to override these classes the way I have done for indicator – ABGR Commented Sep 24, 2020 at 10:17

3 Answers 3

For adding custom/different style to the active tab you can assign a class to the active tab conditionally. Every Tab has its own value (which is their index value also) and assign them class conditionally.

Here is the link of codesandbox:- https://codesandbox.io/s/elegant-tu-lxi1g?file=/src/App.js

    import React, { useState } from "react";
    import "./styles.css";
    import {Tabs, Tab, makeStyles} from '@material-ui/core'

    export default function App() {
      const classes = useStyles()
      const [value, setValue] = useState(0)

      const handleChange = (e, newVal)=>{
        setValue(newVal)
      }


      return (
        <div className="App">
          <Tabs
            value={value}
            onChange={handleChange}
            classes={{indicator: classes.customStyleOnActiveTab}}
            aria-label="some text"
          >
            <Tab label={<span className={ value === 0 ? classes.activeTab : classes.customStyleOnTab}>Tab 1</span>} />
            <Tab label={<span className={ value === 1 ? classes.activeTab : classes.customStyleOnTab}> Tab 2</span>}/>
          </Tabs>
        </div>
      );
    }


    const useStyles = makeStyles({
      customStyleOnTab:{
        fontSize:'15px',
        color:'green'
      },
      customStyleOnActiveTab:{
        color:'red'
      },
      activeTab:{
        fontSize:'16px',
        fontWeight:'600',
        color:'pink'
      }
    })

also, you can assign the className to the Tab element instead of span for keeping the label prop clean, tidy, and uniform.

You can change by use makeStyle.

const useStyle = makeStyles((theme) => ({
   tab: {
     "& .Mui-selected": {
      color: "red",
      fontSize: "20px"
     }
   }
})

then

<Tabs
   className={classes.tab}
>
   <Tab label="Teacher Information" />
   <Tab label="Contract" />
</Tabs>

Another possible solution is to use withStyles.

...
import { default as MuiTab } from "@material-ui/core/Tab";
import { withStyles } from "@material-ui/core/styles";

const styles = {
  // check https://material-ui./api/tab/#css
  // for more overridable styles

  selected: {
    fontSize: "16px",
    fontWeight: "600",
    color: "pink"
  }
};

const Tab = withStyles(styles)((props) => <MuiTab {...props} />);

function App() {
  const [value, setValue] = React.useState(0);

  const handleChange = (e, newVal) => {
    setValue(newVal);
  };

  return (
    <div className="App">
      <Tabs value={value} onChange={handleChange}>
        <Tab label="Tab 1" />
        <Tab label="Tab 2" />
      </Tabs>
    </div>
  );
}