reactjs - 为 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"返回默认的浅灰色，而不是 #73C2FB ，那是浅蓝色。
我关注了 these directions实现我的目标，但它不起作用。

Answer 1

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

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

会寻找 containedRegular classes 的属性(property)那不存在。 IIUC MUI 还应提供 props validation error .
相反，可以通过 styles 应用自定义主题颜色。或 className Prop 。

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>