Custom Button variant with custom color doesn't work

[slaby93]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

I do create custom theme like this:

export const materialUITheme = createTheme({
    palette: {
        fqRed: {
            main: 'red',
            contrastText: 'white',
        },
    },
    components: {
        MuiButton: {
            variants: [
                {
                    props: { variant: 'fqSubmit' },
                    style: {
                        padding: '1rem',
                        borderRadius: '40px',
                        border: '1px dashed black',
                    },
                },
            ],
        },
    },
});

Then I do render them like this:

This is the outcome:

Interestingly enough, it does work with Typography but does not with Button component.

Expected behavior 🤔

I expect that when I provide custom color for custom variant it does work.
It works for default variant like contained or outline, but when I do create variant, it doesn't

Steps to reproduce 🕹

Steps:

1. Create custom Theme as in first parahraph
2. Provide it with ThemeProvider
3. Create two buttons, one with custom variant and custom color, second with standard variant and custom color

Context 🔦

I want to have custom variant that specify how does component looks ( shape ) and custom color that applies colors.

Your environment 🌎

`npx @mui/envinfo`

  Don't forget to mention which browser you used. -> Chrome Version 97.0.4692.71 (Official Build) (64-bit)
  Output from `npx @mui/envinfo` goes here.

  System:
    OS: Linux 5.11 KDE neon 5.23
  Binaries:
    Node: 16.13.1 - ~/.nvm/versions/node/v16.13.1/bin/node
    Yarn: 1.22.17 - ~/.nvm/versions/node/v16.13.1/bin/yarn
    npm: 8.3.0 - ~/.nvm/versions/node/v16.13.1/bin/npm
  Browsers:
    Chrome: 97.0.4692.71
    Firefox: 95.0.1
  npmPackages:
    @emotion/react: ^11.7.1 => 11.7.1 
    @emotion/styled: ^11.6.0 => 11.6.0 
    @mui/base:  5.0.0-alpha.62 
    @mui/icons-material: ^5.2.5 => 5.2.5 
    @mui/material: ^5.2.6 => 5.2.6 
    @mui/private-theming:  5.2.3 
    @mui/styled-engine:  5.2.6 
    @mui/styled-engine-sc: ^5.1.0 => 5.1.0 
    @mui/system:  5.2.6 
    @mui/types:  7.1.0 
    @mui/utils:  5.2.3 
    @types/react: ^17.0.0 => 17.0.37 
    react: ^17.0.2 => 17.0.2 
    react-dom: ^17.0.2 => 17.0.2 
    styled-components: ^5.3.3 => 5.3.3 
    typescript: ^4.5.4 => 4.5.4 

---

UPDATE

Link to reproduce error: https://codesandbox.io/s/cold-rgb-gzjzt?file=/src/Demo.tsx

[abhinav-22-tech]

Please provide a CodeSandbox (https://material-ui.com/r/issue-template-latest), a link to a repository on GitHub, or provide a minimal code example that reproduces the problem.

Here are some tips for providing a minimal example: https://stackoverflow.com/help/mcve

[slaby93]

Please provide a CodeSandbox (https://material-ui.com/r/issue-template-latest), a link to a repository on GitHub, or provide a minimal code example that reproduces the problem.

Here are some tips for providing a minimal example: https://stackoverflow.com/help/mcve

https://codesandbox.io/s/cold-rgb-gzjzt?file=/src/Demo.tsx

[mnajdova]

The background color is set if the variant is contained. As you have a different variant, you would need to add it yourself. Note that we plan on supporting callbacks in the styleOverrides with #30524 which should make overrides ever better.

[slaby93]

@mnajdova could you show me example how to add it myself?

I would understand as I would need to do something like this:

  components: {
    MuiButton: {
      variants: [
        {
          props: { variant: "fqSubmit" },
          style: {
            padding: "1rem",
            borderRadius: "40px",
            border: "1px dashed black"
            backgroundColor: color.main; <-- but this part is missing for me, could you point me to correct direction?
          }
        }
      ]
    }
  }

[mnajdova]

@slaby93 you can make the style callback from the theme, for example:

export const materialUITheme = createTheme({
  palette: {
    fqRed: {
      main: "#F85467",
      contrastText: "white"
    }
  },
  components: {
    MuiButton: {
      variants: [
        {
          props: { variant: "fqSubmit" },
          style: ({ theme: t }) => ({
            padding: "1rem",
            borderRadius: "40px",
            border: "1px dashed black",
            backgroundColor: t.palette.fqRed.main,
            color: t.palette.fqRed.contrastText
          })
        }
      ]
    }
  }
});

[slaby93]

@mnajdova
I ended up with something like this.

                  style: (theme: any) => {
                        const currentColor = theme.theme.palette[theme.ownerState.color];

                        return {
                            padding: '0.7rem',
                            borderRadius: '40px',
                            backgroundColor: currentColor.main,
                            color: currentColor.contrastText,
                            '&:hover': {
                                backgroundColor: transparentize(0.35, currentColor.main),
                            },
                        };
                    },

Which, depending on selected "color" props, gives me different output.

If you know how to do it better, I'm all ears, but this is good enough for now :)

Thanks for the support.

Quick q: If I do have right now selected color fqRed but I just have main and contrastText, I found in docs that I should be able to use "dark" and "light" variations that should be calculated by MUI. How to access those?
https://mui.com/customization/palette/#providing-the-colors-directly

Now:

export const materialUITheme = createTheme({
    palette: {
        fqRed: {
            light: '#0066ff',
            main: '#0044ff',
            // dark: will be calculated from palette.secondary.main,
            contrastText: '#ffcc00',
        },
        contrastThreshold: 3,
        tonalOffset: 0.2,
    },
    components: {
        MuiTypography: {
            defaultProps: {
                fontFamily: 'Roboto',
            },
        },
        MuiIcon: {
            defaultProps: {
                baseClassName: 'material-icons-outlined',
            },
        },
        MuiButton: {
            variants: [
                {
                    props: { variant: 'fqSubmit' },
                    // D.slaby - there is no known TS type that described really  what is in this object
                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
                    style: (theme: any) => {
                        const currentColor = theme.theme.palette[theme.ownerState.color];
                        console.log({ theme, currentColor });
                        return {
                            padding: '0.7rem',
                            borderRadius: '40px',
                            backgroundColor: currentColor.main,
                            color: currentColor.contrastText,
                            '&:hover': {
                                backgroundColor: transparentize(0.35, currentColor.main),
                            },
                        };
                    },
                },
            ],
        },
    },

[github-actions]

Since the issue is missing key information, and has been inactive for 7 days, it has been automatically closed.
If you wish to see the issue reopened, please provide the missing information.