Theme Composition doesn't work with css variables option #44134
Labels
customization: theme
Centered around the theming features
docs
Improvements or additions to the documentation
status: waiting for maintainer
These issues haven't been looked at yet by a maintainer
Steps to reproduce
Link to live example: https://codesandbox.io/p/sandbox/muithemebug-2cllq4
Steps:
createTheme
function and passcssVariables
option in astrue
createTheme
again, with the theme that you just created passed in, with the second parameter being the new arguments that you want to merge into the theme.Current behavior
The theme is broken because of this error "MUI:
vars
is a private field used for CSS variables support.Please use another name." and then cannot be used. This is because when the first one gets created it strips out the "cssVariables" argument and creates the
vars
key and values. So when you usecreateTheme
again, it thinks that it is using thecreateThemeNoVars
option and there's no way to tell it otherwise, and so complains that you used the reservedvars
keyword.Expected behavior
Per the theme composition instructions that are just below this anchor: https://mui.com/material-ui/customization/theming/#createtheme-options-args-theme
I would expect that I am able to build a theme that is based on the values of the previous theme, while also using css variables. This works as expected when you are not using css variables.
Context
We are trying to use theme composition to set styles that are based on the values being created by the theme, e.g. breakpoints, and we also want to be able to use css variables in our theme.
Your environment
npx @mui/envinfo
I primarily use Firefox Developer Edition, but this is not a browser issue.
Search keywords: createTheme cssVariables composition
The text was updated successfully, but these errors were encountered: