时间戳

首页 > 解决方案 > Material UI 调色板为主题添加了额外的颜色，并以与 Primary/Secondary 相同的方式使用它

reactjs - Material UI 调色板为主题添加了额外的颜色，并以与 Primary/Secondary 相同的方式使用它

问题描述

我在调色板中添加了自定义颜色（蓝色）：

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'}/>

或者

<Button color={'blue'}/>

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

谢谢

标签： reactjsmaterial-designmaterial-ui

解决方案

不幸的是，我认为目前的实施是不可能的material-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)

您应该color根据它的variant.

例如，何时color='blue'和variant='text'，您应该应用适当的样式。

当color='blue'和variant='outlined'，颜色应该以不同的方式应用 - 即边界等。

推荐阅读