Material UI pallete add extra color to theme and use it in the same manner Primary/Secondary are used

Question

I have added a custom color (blue) to the palette:

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;

And I would like for it to be used in components like the primary and secondary for example (where the palette is associated with component behavior). Like this:

<Button color={'primary'}/>

or

<Button color={'blue'}/>

Is there a way to achieve this? Basically, as you add the new color to the palette for it to fetch behavior using as base color the "blue" color prop?

Thanks

Patrik Prevuznak Patrik Prevuznak · Accepted Answer · 2019-03-15T21:47:55

Unfortunately, I think it's impossible with current implementation of material-ui

I recommend creating custom component to handle this.

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)

You should specify how this custom color prop affects the Button's styles according to its variant.

E.g. when color='blue' and variant='text', you should apply appropriate styles.

When color='blue' and variant='outlined', color should be applied in different manner - i.e. to border etc.

Material UI pallete add extra color to theme and use it in the same manner Primary/Secondary are used

1 Answers