-
-
Notifications
You must be signed in to change notification settings - Fork 32.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
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
Comments
astjohnpaycor
added
the
status: waiting for maintainer
These issues haven't been looked at yet by a maintainer
label
Oct 16, 2024
mnajdova
added
bug 🐛
Something doesn't work
customization: theme
Centered around the theming features
labels
Oct 17, 2024
@mnajdova I am not convinced that this is a bug. It's more a docs improvement because you'd want to set @astjohnpaycor Does the change below work for your use case? let theme = createTheme({
- cssVariables: true,
typography: {
h1: {
fontFamily: "Verdana, Arial, sans-serif",
},
},
});
theme = createTheme(theme, {
+ cssVariables: true,
typography: {
h1: {
[theme.breakpoints.only("lg")]: {
fontSize: "2.5rem",
lineHeight: "106%",
},
},
},
}); |
siriwatknp
added
docs
Improvements or additions to the documentation
status: waiting for author
Issue with insufficient information
and removed
bug 🐛
Something doesn't work
status: waiting for maintainer
These issues haven't been looked at yet by a maintainer
labels
Oct 21, 2024
@siriwatknp No, that doesn't work because the theme has already been created when you use the subsequent `createTheme` calls, so passing in the `cssVariables` property later doesn't do anything. It doesn't go back through and recreate the theme with the css variables. If that is expected behavior, then that would also be a bug, but I don't think it's expected behavior since this does clarify that only the first argument gets processed and that you have to do deep merging if you're trying to fully re-create the theme with all the options: https://mui.com/material-ui/customization/theming/#createtheme-options-args-theme
|
github-actions
bot
added
status: waiting for maintainer
These issues haven't been looked at yet by a maintainer
and removed
status: waiting for author
Issue with insufficient information
labels
Oct 21, 2024
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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: