如何在withStyles中引用自定义的MuiTheme调色板?

时间:2019-12-19 07:30:39

标签: reactjs material-ui

Material-UI docs解释了如何通过导入颜色对象或直接提供颜色来自定义主题调色板。

我正在组件中使用两种方法:

import { MuiThemeProvider, createMuiTheme, withStyles } from '@material-ui/core/styles';
import blue from '@material-ui/core/colors/blue';

const theme = createMuiTheme({
    palette: {
        primary: blue,
        secondary: {
            main: '#134886'
        },
    },
});

文档还解释了如何定义自定义样式类。

const styles = theme => ({
    primaryText: {
        color: theme.palette.primary.main
    },
    secondaryText: {
        color: theme.palette.secondary.main
    },
}

但是在渲染组件时,这些样式类使用的是默认的主题调色板,而不是自定义的调色板。

如果我将十六进制值直接编码到styles中,那么显然可以呈现正确的颜色。

const styles = theme => ({
    ...
    secondaryText: {
        color: '#134886'
    },
}

但是为什么不能在withStyles描述中访问自定义的调色板定义?

0 个答案:

没有答案