如何覆盖 material-ui 的选项卡选择颜色？答案

【问题标题】：How do I override material-ui's tab selection color?如何覆盖 material-ui 的选项卡选择颜色？
【发布时间】：2020-08-07 04:53:46
【问题描述】：

我正在使用 materialui-tabs 主题 https://material-ui.com/api/tab/ 构建一个 React 16.13.0 应用程序。我在我的组件中创建了这些样式...

const theme = createMuiTheme({
  overrides: {
    MuiTab: {
      root: {
        "&.MuiTab-root": {
          backgroundColor: "black",
          border: 0,
          borderBottom: "2px solid",
          "&:hover": {
            border: 0,
            borderBottom: "2px solid",
          },
        },
        "&.Mui-selected": {
          backgroundColor: "none",
          borderBottom: "2px solid #373985",
          borderColor: "#373985",
        }
      }
    }
  }
});

const useStyles = makeStyles((theme) => ({
  root: {
    width: "100%",
    flexGrow: 1,
    color: "#3739B5",
    backgroundColor: "white",
  },
  viewButtons: {
    marginTop: theme.spacing(2),
    marginBottom: theme.spacing(1),
  },
}));

这些适用于

  <ThemeProvider theme={theme}>
  <AppBar position="static">
    <Tabs
      classes={classes}
      value={value}
      variant="fullWidth"
      centered
      onChange={handleChange}
      aria-label="volunteer dashboard tabs"
    >
      <Tab label={proposedLabel} {...a11yProps(2)} />
      <Tab label={planningLabel} {...a11yProps(1)} />
      <Tab label={inProgressLabel} {...a11yProps(0)} />
      <Tab label={completedLabel} {...a11yProps(3)} />
    </Tabs>
  </AppBar>
  </ThemeProvider>

我正在尝试更改所选标签的背景颜色。基于devtools，检查，类列为

.PrivateTabIndicator-colorSecondary-267 {
             background-color: #f50057;
}

.PrivateTabIndicator-root-265 {
            width: 100%;
             bottom: 0;
             height: 2px;
             position: absolute;
             transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
}

然而，尽管我已经在我的主题中列出了这一点，但颜色显示为红色，尽管我在我的风格中指定了

如何覆盖所选标签的边框颜色？

【问题讨论】：

标签： reactjs tabs material-ui

【解决方案1】：

从 MUI v5 开始，可以使用createTheme()]API 轻松完成，如here 所示。

您需要使用以下方式覆盖样式：

  let theme = useTheme();

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

这个主题可以传递给<ThemeProvider /> 组件，该组件将包装标签所在的部分。

注意：

useTheme()、createTheme() 和 <ThemeProvider /> 都需要从 @mui/material/styles 导入，而不是从 @emotion/react 导入。
从 v5 开始，@mui/lab 提供了<TabContext /> 推荐使用的<TabContext />、<TabList /> 和<TabPanel /> 组件，尽管您仍然可以使用<Tabs /> 的旧组件。

【讨论】：

【解决方案2】：

试试这个！

indicator: {
    backgroundColor : 'your favorite color',
},


<Tabs classes={{ indicator: classes.indicator }}>
   <Tab>....
</Tabs>

【讨论】：

【解决方案3】：

您现在可以使用 TabIndicatorProps 为当前版本的 MUI (4.10.02) 设置活动指示器的样式。文档可用here。

有两种方法可以做到这一点：

方法 1：使用风格：{}

import React from "react";
import PropTypes from "prop-types";
import { Tabs, Tab, makeStyles } from "@material-ui/core";

const TabsIndicator = () => {
  const [value, setValue] = React.useState(0);

  const handleChange = (event, newValue) => {
    setValue(newValue);
  };

  return (
    <React.Fragment>
       <Tabs
         value={value}
         onChange={handleChange}
         TabIndicatorProps={{
           style: { background: "cyan", height: "10px", top: "35px" }
         }}
       >
         <Tab label="TEST1" value={0} />
         <Tab label="TEST2" value={1} />
         <Tab label="TEST3" value={2} />
         <Tab label="TEST4" value={3} />
       </Tabs>
    </React.Fragment>
  );
};

export default TabsIndicator;

方法2：使用className：{classes}

import React from "react";
import PropTypes from "prop-types";
import { Tabs, Tab, makeStyles } from "@material-ui/core";

const useStyles = makeStyles(theme => ({
  indicator: {
    backgroundColor: "green",
    height: "10px",
    top: "45px"
  }
}));

const TabsIndicator = () => {
  const classes = useStyles();

  const [value, setValue] = React.useState(0);

  const handleChange = (event, newValue) => {
    setValue(newValue);
  };

  return (
    <React.Fragment>
        <Tabs
          value={value}
          onChange={handleChange}
          TabIndicatorProps={{ className: classes.indicator }}
        >
          <Tab label="TEST1" value={0} />
          <Tab label="TEST2" value={1} />
          <Tab label="TEST3" value={2} />
          <Tab label="TEST4" value={3} />
        </Tabs>
    </React.Fragment>
  );
};

export default TabsIndicator;

您也可以查看我的sandbox here。希望这会有所帮助！

【讨论】：

【解决方案4】：

你能试试这个对我有用的解决方案吗？我假设您想要覆盖底部边框指示器颜色。

    <Tabs value={0} TabIndicatorProps={{ style: { background: "#hex-color" } }}>
         <Tab className={clasess.tab} label="Home" />
         <Tab className={clasess.tab} label="Services" />
    </Tabs>

【讨论】：