CODEWITHSUNDEEP
reactjsmaterial-ui
Pueblo2708
Pueblo2708

Reputation: 103

React + MUI + Tabs + Style

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.

Upvotes: 1

Views: 2839

Answers (3)

Akis
Akis

Reputation: 2282

In my case i wanted to customise the Tabs for the default, selected, hover and solved it using the code below. As you can see I am using the sx on the parent <Tabs>

export const tabSx = {
  '& .MuiTabs-indicator': {
    backgroundColor: 'red',
  },
  '& .MuiButtonBase-root.MuiTab-root': {
    color: 'black',
    transition: 'color 0.2s ease-in-out',
    '&:hover': {
      color: 'green)',
    },
    '&.Mui-selected': {
      color: 'red',
    },
  },
};

            <Tabs
              value={value}
              onChange={handleChange}
              sx={tabSx}
              aria-label="test tabs"
            >
              <Tab label="Tab 1" {...a11yProps(0)} />
              <Tab label="Tab 2" {...a11yProps(1)} />
              <Tab label="Tab 3" {...a11yProps(2)} />
            </Tabs>

Upvotes: 3

Pueblo2708
Pueblo2708

Reputation: 103

The problem came from the white space in the stylesheet, between the & and .Mui-selected:

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

Regards.

Upvotes: 1

Hamed Siaban
Hamed Siaban

Reputation: 1681

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>

Upvotes: 2

Related Questions