Тема Material-UI не применяется автоматически в AppBar?

Question

Я пытаюсь интегрировать материал-интерфейс в свой проект, и у меня есть некоторые проблемы с настройками пользовательской темы

Я создал собственную тему таким образом

App.js

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

class App extends Component {

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

Затем в компоненте в подструктуре я создаю какой-то конкретный CSS.

Теперь моя проблема в том, что я обязан определить стиль appBar цветом backgroud и явно применить его к компоненту AppBar.Если я не выполню ни одну из этих двух операций, bg appBar останется светло-серым

То, что надо, так это то, что я получаю правильный зеленый из 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/ , где первый пример имеет светло-серый цвет, тогда все остальные примеры имеют синий bg, но в исходном коде нет ничего, что было добавлено для применения синего цвета (на мой взгляд)

Любая помощь, пожалуйста?спасибо, ребята

Answer 1

Использование <AppBar position="static" color="primary">.

По умолчанию AppBar использует цвета из палитры grey.

Мы рассматриваем значение по умолчанию primary для color проппоскольку он не соответствует спецификации и имеет серый цвет по умолчанию для чего-то такого же выдающегося, как панель приложения, это плохая идея в любом случае.