React + MUI + Tabs +样式

Question

我有一些问题，以改变标签呈现方式与MUI和反应。尽管在互联网上找到了无数的解决方案，但没有一个成功。我目前正在使用最新版本的MUI。

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

下面是代码片段，这是我问题的根源：

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

我已经尝试了十几种解决方案来更改所选选项卡的默认颜色，但一直失败。

有人也有同样的问题吗？诚挚的问候。

Answer 1

与TabIndicatorProps不同，尝试使用sx支柱选择所选的选项卡css类：

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

Answer 2

问题来自样式表中的空白，即&和..Mui所选之间的空白：

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

致以问候。

Answer 3

在我的例子中，我想定制默认的Tabs，选择，悬停，并使用下面的代码解决它。如您所见，我在父sx上使用<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>