Material UI Palette custom color with ThemeProvider

Question

I'm trying to apply a custom color to a Button using createMuiTheme and ThemeProvider, and it works when using palette primary and secondary, but when i try to use any other, like "info", it doesnt work:

Anyone know what im doing wrong or any other way to go about this?

Answer 1

primary and secondary attributes are the only ones recognized in palette object.

Answer 2

You are trying to create a custom variant. Creating a custom variant is supported in the latest version(Above v5) of material-UI.

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

const theme = createMuiTheme({
  components: {
    MuiButton: {
      variants: [
        {
          props: { variant: 'twitter' },
          style: {
            backgroundColor: '#00acee',
            color: '#FFFFFF',
            "&:hover": {
              backgroundColor: "#007cad",
            },
          },
        },
        {
          props: { variant: 'facebook' },
          style: {
            backgroundColor: '#3b5998',
            color: '#FFFFFF',
            "&:hover": {
              backgroundColor: "#314c85",
            },
          },
        },
      ],
    },
  },
});

export default theme

UI

<Grid item>
    <Button variant="facebook" startIcon={<FacebookIcon />}>Facebook</Button>
</Grid>
<Grid item>
    <Button variant="twitter" startIcon={<TwitterIcon />}>Twitter</Button>
</Grid>

Here is the link that will help

https://github.com/mui-org/material-ui/issues/15573 https://github.com/mui-org/material-ui/issues/15573#issuecomment-724114107