为 material-ui 主题设置新颜色

Question

我正在尝试使用 material-ui 的 createMuiTheme 为我的 React 应用程序设置一个新的调色板主题。这是我的自定义主题代码：

import {createMuiTheme} from '@material-ui/core/styles';

const customTheme = createMuiTheme({
  palette: {
    primary: {
      main: '#1977d2', //blue
      contrastText: 'white',
    },
    secondary: {
      main: '#FF6600', //orange
      contrastText: 'white',
    },
    regular: {
      main: '#73C2FB' //maya
    }
  }
})

export default customTheme;

这是我将自定义主题设置为应用主题的代码：

import './App.css';
import {ThemeProvider} from '@material-ui/core/styles';

import customTheme from './themes/customTheme';
import App from './app/App';

function Main() {
  return (
    <ThemeProvider theme={customTheme}>
      <App />
    </ThemeProvider>
  );
}

export default Main;

这是我尝试在组件中使用颜色 regular 的代码：

BarButton = ({label, callBack}) => {
    return (
      <Button variant="contained" color="regular" className={this.props.classes.appBarButton} onClick={callBack}>{label}</Button>
    )
  }

当我使用 color="primary" 或 color="secondary" 时，它可以工作，但是 color="regular" returns 默认的浅灰色，而不是 #73C2FB，即浅蓝色。

我按照 these directions 实现了我的目标，但它不起作用。

Answer 1

自定义主题属性永远不能通过 color 属性应用于任何 MUI 组件。这样做的原因是 MUI 采用 interpolated string value 通过其默认值 props 应用样式。你的例子

<Button variant="contained" color="regular">{label}</Button>

会寻找不存在的 containedRegular 属性 classes。 IIUC MUI 还应该提供一个 props validation error.

相反，可以通过 styles 或 className 道具应用自定义主题颜色。

const useStyles = makeStyles(theme => ({
  regular: {
    color: theme.palette.regular.main
  }
}))

const classes = useStyles()
const theme = useTheme()

<Button style={{color: theme.palette.regular.main}}>foo</Button>
<Button className={classes.regular}>bar</Button>

为 material-ui 主题设置新颜色

Set new color for material-ui theme

themes

reactjs

material-ui