Material ui 是否在AppBar上未自动应用材质ui主题？

我正在尝试将材质ui集成到我的项目中，我在自定义主题设置方面遇到了一些问题

我用这种方式创建了一个自定义主题

App.js

const theme = createMuiTheme({
    palette: {
        primary: green,
        secondary: red,
    },
});

class App extends Component {

    render() {
        return (
                <MuiThemeProvider theme={theme}>
                    <BrowserRouter>
                        <Switch>
...}}

const styles = theme => ({
    root: {
        flexGrow: 1,
    },
    grow: {
        flexGrow: 1,
    },
    appBar: {
        backgroundColor: theme.palette.primary["500"]
    },//...)}

class Header extends Component {
    constructor(props) {
        super(props)
        this.classes = props.classes
    }

    render() {
        return (<I18n>
                    {(tsl, {i18n, t, ready}) => {
                        return (
                                <div className={this.classes.root}>
                                    <AppBar position="static" color="default" className={this.classes.appBar}>
                                        <Toolbar>...(irrelevant code)

const theme=createMuiTheme({
调色板：{
小学：绿色，
中学：红色，
},
});
类应用程序扩展组件{
render（）{
返回(
...}}

然后在子结构中的一个组件中，我创建了一些特定的css

现在我的问题是，我必须使用背景颜色定义样式appBar，并将其明确应用于appBar组件。如果我不执行这两个操作之一，appBar的背景将保持浅灰色

值得注意的是，我从theme.palete.primary[“500”]获得了正确的绿色，这意味着主题配置正确

Header.js

const theme = createMuiTheme({
    palette: {
        primary: green,
        secondary: red,
    },
});

class App extends Component {

    render() {
        return (
                <MuiThemeProvider theme={theme}>
                    <BrowserRouter>
                        <Switch>
...}}

const styles = theme => ({
    root: {
        flexGrow: 1,
    },
    grow: {
        flexGrow: 1,
    },
    appBar: {
        backgroundColor: theme.palette.primary["500"]
    },//...)}

class Header extends Component {
    constructor(props) {
        super(props)
        this.classes = props.classes
    }

    render() {
        return (<I18n>
                    {(tsl, {i18n, t, ready}) => {
                        return (
                                <div className={this.classes.root}>
                                    <AppBar position="static" color="default" className={this.classes.appBar}>
                                        <Toolbar>...(irrelevant code)

constyles=theme=>({
根目录：{
flexGrow:1，
},
成长：{
flexGrow:1，
},
appBar：{
背景色：主题.调色板.主[“500”]
},//...)}
类头扩展组件{
建造师（道具）{
超级（道具）
this.classes=props.classes
}
render（）{
返回(
{（tsl，{i18n，t，ready}）=>{
返回(
第一个例子是浅灰色的，其他所有的例子都是蓝色的背景，但是在源代码中没有添加任何应用蓝色的内容（在我看来）

有什么帮助吗？谢谢大家使用

默认情况下，
AppBar
使用
灰色调色板中的颜色

我们正在考虑对
颜色
道具默认设置为
主
，因为它不符合规范，而且对于像应用程序条这样突出的东西，默认设置为灰色是个坏主意。
谢谢@epsilon，回答得很好！我没有马上明白你的意思，所以我会在回答中对其他用户更明确一些正在处理同一问题：修复了该问题。@ZiedHamdi感谢您的反馈。答案确实比必要的更深入。我在答案中添加了您的修复。