Alternate colors of Material UI on components

0
votes

My ask is about the use of the different colors of material ui, for example:

Theme primary color has multiple variants (100, 200, 300, 400, 500, etc). How can call this colors from my component?

I try this:

<Button variant='contained' color='primary.100'>Button</Button>

But doesn't works... I try that because I want use this variant without implement css or makeStyles for call this colors

2
javascriptreactjsmaterial-ui

2 Answers

0
votes

As per API Documentation for Button component here, color property only accepts values from 'default' | 'inherit' | 'primary' | 'secondary'.

You can change Button color either by managing via themes or directly with css classes i.e root class. Check custom buttons in codesandbox

0
votes

you should try to give a look at this: https://material-ui.com/customization/color/#playground

this gonna allow you to update and use you custom color across the whole website.

import { createMuiTheme } from '@material-ui/core/styles';

const theme = createMuiTheme({
  palette: {
    primary: {
      light: '#757ce8',
      main: '#3f50b5',
      dark: '#002884',
      contrastText: '#fff',
    },
    secondary: {
      light: '#ff7961',
      main: '#f44336',
      dark: '#ba000d',
      contrastText: '#000',
    },
  },
});

then you should be able to use it like this:

<Button variant='contained' color='primary.light'>Button</Button>