React + MUI + Tabs + Style

0
votes

I have some issue to change the way tabs are rendered with MUI and React. Despite the numerous solutions found in the internet, none of them succeeded. I am currently using the latest version of MUI

"@emotion/react": "^11.9.3",
"@emotion/styled": "^11.9.3",
"@mui/icons-material": "^5.8.4",
"@mui/material": "^5.9.0"

Here is the code snipplet, the source of my problem:

<Tabs value={value} onChange={handleChange} aria-label='deals tabs'
      TabIndicatorProps={{ style: { backgroundColor: 'white' } }}
      centered>
</Tabs>

I have tried a dozen of solutions to change the default color of the selected tab and I just kept failing.

Did someone had the same issue ? Best regards.

1
reactjsmaterial-ui
In Our project we managed to use this: TabIndicatorProps={{ style: { background: "gold", height: "3px" }, }} pretty similar to what you have though - Shaded

1 Answers

0
votes

Instead of TabIndicatorProps, Try selecting the selected tab css class using sx prop:

<Tabs value={value} onChange={handleChange} aria-label='deals tabs'
  sx={{ "& .Mui-selected": { backgroundColor: "white" } }}
  centered>
</Tabs>