Material-UI-next主题未应用于循环进度

时间:2018-02-24 05:00:52

标签: reactjs material-ui

我已根据文档更新了我的主题,但循环进度继续使用默认主色,而不是主题中指定的原色。最终,我希望能够通过最终用户调整主题,使用mobx计算值来调整主题,但目前我甚至无法使用静态主题。

import {MuiThemeProvider} from "material-ui/styles"
import Loading from "../common/components/Loading";
import {createMuiTheme} from "material-ui";


const testingTheme = createMuiTheme({
    primary: {
        main: '#67e2ff',
        light: '#a0ffff',
        dark: '#1eb0cc',
        contrastText: '#3b3f42'
    },

    secondary: {
        main: '#590ce8',
        light: '#9549ff',
        dark: '#0000b4',
        contrastText: '#fefefe'
    }});

/**
 * The AppContainer handles all of the logical functionality that has to happen at the root level.
 * A prime example is the MuiThemeProvider, that must be the parent of all other rendered components.
 * To change the muiTheme we use the AppContainer to render the MuiThemeProvider
 */
@inject("uiStore") @observer
export default class AppContainer extends Component {
    componentDidMount() {
        console.log(this.props.uiStore);
    }
    render() {
        return (
            <MuiThemeProvider theme={testingTheme}>
                {this.props.uiStore.initialized ? <App/> : <Loading size={10}/>}
            </MuiThemeProvider>
        )
    }
}

enter image description here

1 个答案:

答案 0 :(得分:0)

我对主题的定义是错误的,我错过了根调色板属性。

const testingTheme = createMuiTheme({
    palette: {
        primary: {
            main: '#67e2ff',
            light: '#a0ffff',
            dark: '#1eb0cc',
            contrastText: '#3b3f42'
        },

        secondary: {
            main: '#590ce8',
            light: '#9549ff',
            dark: '#0000b4',
            contrastText: '#fefefe'
        }
    }
});