Skip to content
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

Merged
merged 1 commit into from
Jun 12, 2023

Conversation

brijeshb42
Copy link
Contributor

@brijeshb42 brijeshb42 commented Jun 6, 2023

Added a minimal code example to showcase how createCssVarsProvider is used.

Sorry, something went wrong.

@brijeshb42 brijeshb42 requested review from mnajdova and siriwatknp June 6, 2023 07:45
@brijeshb42 brijeshb42 marked this pull request as ready for review June 6, 2023 07:45
@brijeshb42 brijeshb42 added docs Improvements or additions to the documentation package: system Specific to @mui/system and removed package: system Specific to @mui/system labels Jun 6, 2023
@mui-bot
Copy link

mui-bot commented Jun 6, 2023

Netlify deploy preview

Bundle size report

No bundle size changes

Generated by 🚫 dangerJS against 1a19ad2

@brijeshb42 brijeshb42 force-pushed the docs-system-css-vars branch from 92e4d3b to 73ae8f3 Compare June 6, 2023 10:34
## 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.
Copy link
Member

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.

@brijeshb42 brijeshb42 force-pushed the docs-system-css-vars branch from 73ae8f3 to 472d8dc Compare June 7, 2023 12:51
Copy link
Member

@siriwatknp siriwatknp left a 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.

@brijeshb42 brijeshb42 force-pushed the docs-system-css-vars branch from 472d8dc to 7b82282 Compare June 12, 2023 10:04

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
@brijeshb42 brijeshb42 force-pushed the docs-system-css-vars branch from 7b82282 to 1a19ad2 Compare June 12, 2023 10:13
@brijeshb42 brijeshb42 merged commit 5e2d83c into mui:master Jun 12, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
docs Improvements or additions to the documentation
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

4 participants