Палитра пользовательского интерфейса материала добавляет дополнительный цвет к теме и использует его таким же образом, как и основной / дополнительный

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.

например. когда color='blue' и variant='text', вы должны применить соответствующие стили.

Когда color='blue' и variant='outlined', цвет должен применяться по-разному - то есть к границе и т. Д.