-
-
Notifications
You must be signed in to change notification settings - Fork 32.5k
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
[docs] Add usage of createCssVarsProvider #37513
Conversation
Netlify deploy previewBundle size report |
92e4d3b
to
73ae8f3
Compare
## Introduction | ||
|
||
CSS theme variable support is a new feature in MUI System added in [`v5.0.5`](https://github.com/mui/material-ui/releases/tag/v5.0.5) as an experimental export. It tells the underlying Material UI, Joy UI or even custom UI library components to use the generated CSS theme variables instead of raw values. This provides significant improvements in developer experience related to theming and customization. | ||
With these variables, you can inject a theme into your app's stylesheet _at build time_ to apply the user's selected settings before the whole app is rendered. You can checkout the [advantages](https://mui.com/material-ui/experimental-api/css-theme-variables/overview/#advantages) and [trade-offs](https://mui.com/material-ui/experimental-api/css-theme-variables/overview/#trade-offs) of using CSS theme variables before using them. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think we can copy the advantages and trade-offs sections. I would even recommend adding a Why section explaining why people should care about this.
docs/data/system/experimental-api/css-theme-variables/css-theme-variables.md
Outdated
Show resolved
Hide resolved
docs/data/system/experimental-api/css-theme-variables/css-theme-variables.md
Outdated
Show resolved
Hide resolved
docs/data/system/experimental-api/css-theme-variables/css-theme-variables.md
Show resolved
Hide resolved
73ae8f3
to
472d8dc
Compare
docs/data/system/experimental-api/css-theme-variables/CreateCssVarsProvider.js
Show resolved
Hide resolved
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
👍 The rest looks good to me, just create another file with .tsx
extension for the demo.
472d8dc
to
7b82282
Compare
7b82282
to
1a19ad2
Compare
Added a minimal code example to showcase how
createCssVarsProvider
is used.