Cannot read properties of undefined (reading 'main') when defining custom color variants

[gempain]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

When adding new component variants, say for Button, I am allowed to create variants by declaring ButtonPropsColorOverrides and then defining the corresponding variants in a custom theme, in the components.MuiButton.variants property. While this works for the Button.variant property, it doesn't for Button.color. After setting my variants, when I use them in code, I get:

Cannot read properties of undefined (reading 'main')

Expected behavior 🤔

I would expect the above error not to happen, since defining variants for the variant property (instead of color) does not create this issue.

I suspect that MUI tries to find my custom color in the theme palette, hence looking for theme.palette.myColor.main is undefined.

Steps to reproduce 🕹

Simply use this component in a React app:

declare module '@mui/material/Button' {
  interface ButtonPropsColorOverrides {
    hello: true;
  }
}

const theme = createTheme({
  components: {
    MuiButton: {
      variants: [
        {
          props: { color: 'hello' },
          style: { background: 'red' },
        },
      ],
    },
  },
});

export function Main() {
  return (
    <ThemeProvider theme={theme}>
      <Button color="hello" size="small">Small</Button>
    </ThemeProvider>
  );
}

I tried defining the color in the theme platte, but no luck:

const theme = createTheme({
  palette: {
    hello: {
      main: 'red',
    },
  } as any,
  // ...
});

Context 🔦

I'm trying to add additional colors alongside primary, secondary, etc, without creating a custom component. I want to keep using MUI's Button, I don't want to create a proxy component as this is for a shared theme package and I want my users to keep importing Button from @mui/material instead of @my-org/my-theme.

I looked at #14185 but it's not solving my problem.

Your environment 🌎

`npx @mui/envinfo`

 System:
    OS: macOS 11.6
  Binaries:
    Node: 14.17.5 - ~/.nvm/versions/node/v14.17.5/bin/node
    Yarn: Not Found
    npm: 7.22.0 - ~/.nvm/versions/node/v14.17.5/bin/npm
  Browsers:
    Chrome: 96.0.4664.55
    Edge: Not Found
    Firefox: Not Found
    Safari: 15.0
  npmPackages:
    @emotion/react: ^11.6.0 => 11.6.0 
    @emotion/styled: ^11.6.0 => 11.6.0 
    @mui/base:  5.0.0-alpha.56 
    @mui/lab: ^5.0.0-alpha.57 => 5.0.0-alpha.57 
    @mui/material: ^5.x.x => 5.2.0 
    @mui/private-theming:  5.2.1 
    @mui/styled-engine:  5.2.0 
    @mui/styles: ^5.x.x => 5.2.0 
    @mui/system:  5.2.1 
    @mui/types:  7.1.0 
    @mui/utils:  5.2.1 
    @types/react: ^17.0.36 => 17.0.36 
    react: ^17.0.2 => 17.0.2 
    react-dom: ^16.13.1 => 16.14.0 
    typescript: ^4.3.4 => 4.3.4 

[mnajdova]

I tried defining the color in the theme palatte, but no luck

It is unclear what you have tried. Could you share a codesandbox? Yes, the color needs to be defined in the palette, as the Button expects that:

• theme.palette[yourColor].main
• theme.palette[yourColor].dark
• theme.palette[yourColor].contrastText

will be defined.

---

If you define the color in the palette, everything should work out of the box.

[mnajdova]

Duplicate of #13875

[gempain]

@mnajdova thanks for your answer ! As mentioned in my initial post, I have tried adding the color to the palette but I still get the issue:

const theme = createTheme({
  palette: {
    hello: {
      main: 'red',
    },
  } as any,
  // ...
});

I have to use as any because Mui Typings don't let me add custom colors here.

[mnajdova]

You need to use module augmentation if you want to add new things in the theme - https://mui.com/customization/theming/#custom-variables

Without a reproduction, I can't do anything.

[gempain]

I'll put up a sandbox, just a sec 😄

[gempain]

Ok, it seems the sandbox is actually working 😓 There must be something wrong with my local setup, greatest apologies.

[ryanhartwig]

@gempain Did you find the solution? I am having the same issue when trying to add a custom color to the theme.