reactjs 如何覆盖mui/material/Tab'的选定字体颜色(react)

v2g6jxz6 于 2023-01-17 发布在 React

关注(0)|答案(3)|浏览(128)

<Tabs  
                value={this.state.value}
                onChange={this.handleChange}
                textColor="primary"
                indicatorColor="primary"
                variant="scrollable"
                scrollButtons="auto"
                aria-label="scrollable auto tabs example"
                TabIndicatorProps={{ style: { background: "red" , color: "red" }}}
            >
                {
                    this.props.tabs.map(tab => {
                        return <Tab     label={tab.label} {...this.a11yProps(tab.index)} />
                    })
                }

            </Tabs>

与选项卡指示器属性一起使用的红线

reactjs

来源：https://stackoverflow.com/questions/72075350/how-can-i-override-the-selected-font-color-of-mui-material-tab-react

3条答案

按热度按时间

bt1cpqcv1#

尝试使用以下方式覆盖

let theme = useTheme();

theme = createTheme(theme, {
    components: {
      MuiTab: {
        styleOverrides: {
          root:{
            "&.Mui-selected": {
              backgroundColor: theme.palette.secondary.main,
              color: theme.palette.secondary.contrastText,
              borderRadius: "25px"
            }
          }
        }
          }
        }
      })

它可以是地狱般的

赞(0）回复(0）举报 2023-01-17

w1jd8yoj2#

如果您的主题辅助色是红色，您可以在Tabs上设置textColor prop 。

<Tabs textColor="secondary"></Tabs>

或者，如果需要自定义颜色，可以自定义Tab的样式。

import { styled } from "@mui/material/styles";

const StyledTab = styled(Tab)({
  "&.Mui-selected": {
    color: "red"
  }
});

<StyledTab label={tab.label} />