如何更改 Material UI 选项卡的配色方案？

我希望更改 Material UI 选项卡的配色方案，带有白色背景和绿色指示符和文本。

这是我目前所做的，

演示.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;

和 index.js

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

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

截至目前，选项卡显示了预期的配色方案，但并没有保持原样，仅悬停在上方显示白绿色配色方案。它的标签上也有蓝色背景，我也想改为白色。

我已经参考了较早的答案并进行了更改。这是代码和框链接 - https://codesandbox.io/s/mui3-how-to-override-tab-theme-forked-qexyf?file=/index.js:0-205