Material ui 如何更改材质UI选项卡的颜色方案？

我希望更改材质UI选项卡的颜色方案，使用白色背景、绿色指示器和文本

这是我现在所做的

demo.js

import React from "react";
import PropTypes from "prop-types";
import { MuiThemeProvider, createMuiTheme } from "@material-ui/core/styles";
import AppBar from "@material-ui/core/AppBar";
import Tabs from "@material-ui/core/Tabs";
import Tab from "@material-ui/core/Tab";
import Typography from "@material-ui/core/Typography";
import { orange, pink, green, lightGreen } from "@material-ui/core/colors";

function TabContainer(props) {
  return (
    <Typography component="div" style={{ padding: 8 * 3 }}>
      {props.children}
    </Typography>
  );
}

TabContainer.propTypes = {
  children: PropTypes.node.isRequired
};

const theme = createMuiTheme({
  overrides: {
    MuiTabs: {
      indicator: {
        backgroundColor: green[700]
      }
    },
    MuiTab: {
      root: {
        "&:hover": {
          backgroundColor: "#FFFFFF",
          color: green[700]
        }
      },
      selected: {
        backgroundColor: "#FFFFFF",
        color: green[700],
        "&:hover": {
          backgroundColor: green[100],
          color: green[700]
        }
      }
    }
  }
});

class SimpleTabs extends React.Component {
  state = {
    value: 0
  };

  handleChange = (event, value) => {
    this.setState({ value });
  };

  render() {
    const { classes } = this.props;
    const { value } = this.state;

    return (
      <MuiThemeProvider theme={theme}>
        <div>
          <AppBar position="static">
            <Tabs value={value} onChange={this.handleChange}>
              <Tab label="Item One" />
              <Tab label="Item Two" />
              <Tab label="Item Three" href="#basic-tabs" />
            </Tabs>
          </AppBar>
          {value === 0 && <TabContainer>Item One</TabContainer>}
          {value === 1 && <TabContainer>Item Two</TabContainer>}
          {value === 2 && <TabContainer>Item Three</TabContainer>}
        </div>
      </MuiThemeProvider>
    );
  }
}

SimpleTabs.propTypes = {
  classes: PropTypes.object.isRequired
};

export default SimpleTabs;

从“React”导入React；
从“道具类型”导入道具类型；
从“@material ui/core/styles”导入{MuiThemeProvider，createMuiTheme}”；
从“@material ui/core/AppBar”导入AppBar；
从“@material ui/core/Tabs”导入选项卡；
从“@material ui/core/Tab”导入选项卡；
从“@material ui/core/Typography”导入排版；
从“@material ui/core/colors”导入{橙色、粉色、绿色、浅绿色}；
功能选项卡容器（道具）{
返回(
{props.children}
);
}
TabContainer.propTypes={
子项：PropTypes.node.isRequired
};
const theme=createMuiTheme({
覆盖：{
缪塔布斯：{
指标：{
背景颜色：绿色[700]
}
},
MuiTab：{
根目录：{
“&：悬停”：{
背景颜色：“FFFFFF”，
颜色：绿色[700]
}
},
选定：{
背景颜色：“FFFFFF”，
颜色：绿色[700]，
“&：悬停”：{
背景颜色：绿色[100]，
颜色：绿色[700]
}
}
}
}
});
类SimpleTabs扩展了React.Component{
状态={
数值：0
};
handleChange=（事件、值）=>{
this.setState（{value}）；
};
render（）{
const{classes}=this.props；
const{value}=this.state；
返回(
MUI正在悬停显示主题，因为您指定了：

MuiTab：{
根目录：{
“&：悬停”：{
//悬停主题在这里。。。
}
}
}

注意
MuiTab root
下指定的
&:hover

要获取所选项目的主题显示，请尝试以下操作：

MuiTab：{
根目录：{
“&$selected”：{//或您的示例中的“&.Mui selected”
//选择的主题在这里。。。
}
}
}

见：

您还应该查看控制台中的一些有用日志：

materialui:'MuiTab'组件增加了'selected'内部状态的CSS特性。
您不能像这样覆盖它：
{
“根”：{
…//为简洁起见，将其缩短
},
…，//为了简洁而缩短
“选定”：{
…//为简洁起见，将其缩短
}
}
相反，您需要使用$ruleName语法：
{
“根”：{
“&$selected”：{
…//为简洁起见，将其缩短
}
}
}
请参见下面的改进和覆盖配置，并附上注释


控制台中的错误（在您的示例中）已经有一些有用的提示。请遵循它们并根据需要进行更改


请告诉我它是否有效）
这没有帮助吗，downvoter？我会检查一下，请允许我花点时间。很抱歉迟到了，这个解决方案也能按预期工作。感谢您的指导。在本例中，您不需要向
MuiTab root
添加背景色。背景色已经在
MuiTabs root
@j1mbl3s上设置好了，谢谢很好，正在工作。谢谢你的指导。

import React from 'react';
import { render } from 'react-dom';
import Demo from './demo';

const rootElement = document.querySelector('#root');
if (rootElement) {
  render(<Demo />, rootElement);
}
      

const theme = createMuiTheme({
  overrides: {
    MuiTabs: {
      root: {
        backgroundColor: "#FFFFFF" // overrides blue background for panel
      },
      indicator: {
        backgroundColor: green[700]
      }
    },
    MuiTab: {
      root: {
        "&$selected": { // proper way for styling selected tab
          color: green[700],

          "&:hover": {
            backgroundColor: green[100],
            color: green[900]
          }
        }
      },
      wrapper: { // styles tab value
        color: green[500]
      }
    }
  }
});