如何修改Material UI Tabs组件配色为白底绿字配绿色指示器

你需要调整3处配置即可实现预期效果：

• 修正AppBar默认蓝色背景：你当前使用的AppBar组件默认采用primary主题色（蓝色）作为背景，直接给AppBar添加color="default"属性即可将其背景改为白色，也可以通过主题覆盖MuiAppBar的样式实现。
• 补全Tab默认状态样式：现有配置仅设置了Tab的hover、selected状态样式，没有配置非选中状态的默认样式，导致非选中时还是继承父组件样式，需要在MuiTab.root配置项中新增默认背景色和文字颜色。
• 移除无效的prop类型声明：你的SimpleTabs组件没有使用withStyles高阶组件，却声明了必填的classes属性，会触发运行时报错，需要删除对应的propTypes配置。

修改后的完整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 { green } 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: {
        // 新增默认状态样式
        backgroundColor: "#FFFFFF",
        color: green[700],
        "&:hover": {
          backgroundColor: green[100],
          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 { value } = this.state;

    return (
      <MuiThemeProvider theme={theme}>
        <div>
          {/* 给AppBar添加color="default"修改背景为白色 */}
          <AppBar position="static" color="default">
            <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>
    );
  }
}

export default SimpleTabs;

index.js代码无需调整，修改后即可实现白色背景、绿色指示器、选中/非选中状态均为绿色文字的效果，hover时会显示浅绿色背景高亮。

内容的提问来源于stack exchange，提问作者Sandeep Roy