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

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

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

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

方法一：使用样式：{}

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;

你也可以在这里查看我的沙箱。希望这可以帮助！

试试这个 ！

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


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

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

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

  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 />组件，该组件将包装存在选项卡的部分。

注意：

1. useTheme()，createTheme()并且<ThemeProvider />都需要从而@mui/material/styles不是从@emotion/react.
2. 从V5开始，@mui/lab提供<TabContext />，<TabList />和<TabPanel />其组件的文档推荐使用，虽然你仍然可以使用的旧部件<Tabs />。