Question

我已向调色板添加了自定义颜色（蓝色）：

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

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

谢谢

Answer 1

不幸的是，我认为使用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道具如何影响Button的样式。

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

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

材质UI调色板为主题添加了额外的颜色，并以与使用主/次相同的方式使用它

1 个答案: