CSS Variables and custom colors: can't access property "main" #46549

[xandris]

Steps to reproduce

Steps:

1. Open this link to live example: https://stackblitz.com/edit/github-ym4w3uq7?file=src%2FApp.tsx

Current behavior

A crash in Button/Button.js:

   "--variant-textColor": (theme.vars || theme).palette[color].main,

Uncaught TypeError: can't access property "main", (intermediate value).palette[color] is undefined

Expected behavior

A purple button.

Context

I'm trying to use custom palette colors and CSS variables but I can't figure out how from the documentation.

My previous ticket got closed with this comment:

You don't need a baseTheme. Do this instead:

const theme = createTheme({
  cssVariables: true,
  palette: {
    purple: baseTheme.palette.augmentColor({
      color: { main: '#7f007f' },
      name: 'purple',
    }),
  },
});

If you add the palette to the 2nd argument, it will replace the default palette and that's why the error occur because the default Button is trying to access the primary color but there is no more primary palette.

But there are a few issues with that suggestion:

• It uses baseTheme itself as there's no other way to access augmentColor
• If there were settings in baseTheme this discards them
• Without cssVariables: true my example works and the palette is deep-merged correctly.

Given that the theme merging works without cssVariables: true, what's the correct pattern with cssVariables: true?

Your environment

This is the Stackblitz container on Firefox.

npx @mui/envinfo

System:
OS: Linux 5.0 undefined
Binaries:
Node: 20.19.1 - /usr/local/bin/node
npm: 10.8.2 - /usr/local/bin/npm
pnpm: 8.15.6 - /usr/local/bin/pnpm
Browsers:
Chrome: Not Found
npmPackages:
@emotion/react: latest => 11.14.0
@emotion/styled: latest => 11.14.1
@mui/core-downloads-tracker: 7.2.0
@mui/icons-material: latest => 7.2.0
@mui/material: latest => 7.2.0
@mui/private-theming: 7.2.0
@mui/styled-engine: 7.2.0
@mui/system: 7.2.0
@mui/types: 7.4.4
@mui/utils: 7.2.0
@types/react: latest => 19.1.8
react: latest => 19.1.0
react-dom: latest => 19.1.0
typescript: latest => 5.8.3

Search keywords: can't access property "main" cssvariables custom colors

[siriwatknp]

If that's the case, then you need to prepare the palette separately before creating a theme with CSS variables.

const { palette } = createTheme();

const purple = palette.augmentColor({
  color: { main: '#7f007f' },
  name: 'purple',
});
// `purple` is now a plain object

const theme = createTheme({
  cssVariables: true,
  palette: {
    purple,
  },
});

https://stackblitz.com/edit/github-ym4w3uq7-c8ntv8oj?file=src%2FApp.tsx,src%2FProTip.tsx