Reactjs 材质UI托盘为主题添加额外的颜色，并以与主/次主题相同的方式使用

我已将自定义颜色（蓝色）添加到调色板：

const rawTheme = createMuiTheme({
  palette: {
    primary: {
      light: '#7ED321',
      main: '#417505',
      dark: '#2B5101',
      contrastText: '#EEEEEE'
    },
    secondary: {
      light: '#888888',
      main: '#444444',
      dark: '#222222',
      contrastText: '#EEEEEE'
    },
    type: 'dark'
  },
  typography: {
    useNextVariants: true
  }
});

const blue = {
  main: blueMui['600']
};
rawTheme.palette.augmentColor(blue);

const theme = deepmerge(rawTheme, {
  palette: {
    blue,
  },
});

export default theme;

我希望它能用于组件，比如主组件和次组件（其中调色板与组件行为相关联）。像这样：

<Button color={'primary'}/>

或

有没有办法做到这一点？基本上，当您将新颜色添加到调色板中，以便使用“蓝色”颜色道具作为基色获取行为时

---

谢谢

不幸的是，我认为目前的

材质ui的实现是不可能的

我建议创建自定义组件来处理此问题

import React from 'react'
import {withStyles, createStyles} from '@material-ui/styles'
import MuiButton from '@material-ui/core/Button'
import classNames from 'classnames'

const styles = createStyles((theme) => ({
  blue: {
    backgroundColor: theme.palette.blue.main,
  },
}))

const Button = ({color, children, classes, className, variant = 'text', ...props}) => {
  return (
    <MuiButton
      color={color}
      variant={variant}
      className={classNames({[classes.blue]: color === 'blue' && variant === 'text'}, className)}
      {...props}
    >
      {children}
    </MuiButton>
  )
}

export default withStyles(styles)(Button)

从“React”导入React
从“@material ui/styles”导入{withStyles，createStyles}
从“@material ui/core/Button”导入MuiButton
从“classNames”导入类名
常量样式=创建样式（（主题）=>({
蓝色：{
背景色：theme.palete.blue.main，
},
}))
常量按钮=（{color，children，class，className，variant='text'，…props}）=>{
返回(
{儿童}
)
}
导出默认样式（样式）（按钮）

您应该指定此自定义

颜色

道具如何根据其

变体

影响按钮的样式

例如，当

color='blue'

和

variant='text'

时，应采用适当的样式

当

color='blue'

和

variant='outlined'

时，应以不同的方式应用颜色-即边框等

import React from 'react'
import {withStyles, createStyles} from '@material-ui/styles'
import MuiButton from '@material-ui/core/Button'
import classNames from 'classnames'

const styles = createStyles((theme) => ({
  blue: {
    backgroundColor: theme.palette.blue.main,
  },
}))

const Button = ({color, children, classes, className, variant = 'text', ...props}) => {
  return (
    <MuiButton
      color={color}
      variant={variant}
      className={classNames({[classes.blue]: color === 'blue' && variant === 'text'}, className)}
      {...props}
    >
      {children}
    </MuiButton>
  )
}

export default withStyles(styles)(Button)