CODEWITHSUNDEEP
cssreactjsmaterial-ui
Invalid_Path
Invalid_Path

Reputation: 341

How to style Material UI's Tab component label?

I'm looking for a way to customize the color of the text inside the Tab component but at the same time retaining the ability for it to be colored over when selected as an active Tab.

Example code:

<Tabs centered onChange={handleChange} value={value} textColor={'secondary'} indicatorColor={'secondary'}>
    <Tab label={'Hello There'} style={{color: '#fff'}}/>
    <Tab label={'Hello There'} style={{color: '#fff'}}/>
    <Tab label={'Hello There'} style={{color: '#fff'}}/>
</Tabs>

The above code will result in the change of the text color BUT when the Tab becomes active, it won't be overridden.

If it helps, I'm also using styled-components for ease of use.

Upvotes: 1

Views: 2884

Answers (1)

95faf8e76605e973
95faf8e76605e973

Reputation: 14201

You can use the makeStyles export of material-ui to create your custom class for the label

import { makeStyles } from "@material-ui/core";

const useStyles = makeStyles({
  customLabelColor: {
    color: "#fff"
  }
});

export default function App() {
  const classes = useStyles();
  return (
    ...
    <Tab
      label={"Hello There"}
      classes={{
        textColorSecondary: classes.customLabelColor
      }}
    />
    ...
  );
}

CodeSandBox: https://codesandbox.io/s/quirky-kowalevski-xzf7g?file=/src/App.js

Refer here for other methods on how to override the CSS for Tab.

On the same reference I linked, have a look at the textColorSecondary rule name. This is specific to your question since you are using textColor="secondary" on your parent component Tabs

Upvotes: 1

Related Questions