CODEWITHSUNDEEP
reactjsmaterial-ui
Divyansh Goenka
Divyansh Goenka

Reputation: 1104

How to customise React Material UI's Tab Component's text style

I'm using React Material UI library's Tab Component. I want to remove any textTransform the library may be applying to capitalise the tab labels. I have tried this:

const CustomTab = withStyles({
    ".MuiButtonBase-root": {textTransform: "none"}
})(Tab);

But it doesn't seem to work, please help

Upvotes: 3

Views: 14365

Answers (2)

roll
roll

Reputation: 41

you can use sx prop to transform the text or add any custom css

<Tab  sx={{textTransform :"none"}} label = "add product"/>

reference Material-UI

Upvotes: 4

Fraction
Fraction

Reputation: 12993

you must use the root rule which is equivalent to .MuiTab-root CSS class name:

const CustomTab = withStyles({
  root: {
    textTransform: "none"
  }
})(Tab);

example from Material-UI doc: https://material-ui.com/components/tabs/#customized-tabs

Upvotes: 7

Related Questions