Material-ui 主题不会自动应用在 AppBar 上？

Question

我正在尝试将 material-ui 集成到我的项目中，但自定义主题设置存在一些问题

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

App.js

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

class App extends Component {

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

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

现在我的问题是我必须用背景颜色定义样式 appBar 并将其显式应用于 AppBar 组件。如果我不做这两个操作之一，appBar的bg仍然是浅灰色

奇怪的是我从 theme.palette.primary["500"] 得到了正确的绿色，这意味着主题配置正确

Header.js

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)

我遵循https://material-ui.com/demos/app-bar/ 中的示例，其中第一个示例具有浅灰色，然后所有其他示例具有蓝色背景，但源代码中没有添加任何内容以应用蓝色（在我看来)

有什么帮助吗？谢谢大家

Answer 1

使用<AppBar position="static" color="primary">。

默认情况下，AppBar 使用来自grey 调色板的颜色。

我们正在考虑将color 属性默认为primary，因为它不符合规范，并且对于像应用栏这样突出的东西将灰色作为默认值是一个坏主意。