Comments (10)
@mnajdova @siriwatknp @brijeshb42 what do you think about this one?
We could also plan to make the CssVarsProvider the only provider in v7. If we wish to do that, we would have to stabilize it in v6 as well as deprecate the ThemeProvider, marking it for removal in v7.
from material-ui.
@siriwatknp, May I assign this one to you? You seem to have better context for it right now, having worked on the CssVarsProvider and the zero-runtime side.
from material-ui.
Involved discussion: #41068
from material-ui.
I agree to stabilize the API. The big task left is to handle the performance. createTheme
takes ~0.x ms but extendTheme
takes ~2-5ms.
The best way I found to optimize this (for MUI system) is that the extendTheme
should be called at build-time via a CLI.
from material-ui.
In that case, a user friendly way to do this would be to have a bundler plugin to inject the themes. It would be similar to a subset of what the zero runtime plugin does.
from material-ui.
I added an overview of the steps to the description. I also added it to the v6 milestone. It doesn't require breaking changes, but we have to deprecate ThemeProvider
as soon as possible to give users time to adjust. Because of this, we'll schedule this work alongside the v6 work.
from material-ui.
@siriwatknp, May I assign this one to you? You seem to have better context for it right now, having worked on the CssVarsProvider and the zero-runtime side.
Yes, please assign it to me.
from material-ui.
I dove into the logic in: #41223.
- The behavior of the returned value by:
const { mode, systemMode } = useColorScheme();
is probably not right. I would expect these two should be undefined/null on the first render, unless { noSsr: true }
is provided as an option. Otherwise, how are you supposed to handle hydration? The main downside is that it mean that the component renders twice, but this is more sound. And developers could still use { noSsr: true }
like useMediaQuery
provides.
- Also, I noticed that we don't memo the theme when we update the mode-related value. This means that we render all the descendants of that rely on the theme twice, this is horrible for performance. A reproduction: https://codesandbox.io/p/sandbox/gracious-currying-nxfvjd?file=%2Fsrc%2FDemo.tsx. Can someone create a dedicated GitHub issue for this? Thanks
Deprecate ThemeProvider in favor of CssVarsProvider
Are we sure about this? It doesn't sound compatible with keeping emotion running on the side.
from material-ui.
Deprecate ThemeProvider in favor of CssVarsProvider
I don't think we need to deprecate ThemeProvider
, it's still useful for testing purpose.
from material-ui.
It doesn't sound compatible with keeping emotion running on the side.
Why? The current CssVarsProvider works with Emotion.
I don't think we need to deprecate ThemeProvider, it's still useful for testing purpose.
The purpose of deprecating it would be to be able to eventually remove it, to avoid confusing users about which one they should use, and to avoid duplicating work on maintaining and supporting two different theme providers.
from material-ui.
Related Issues (20)
- [material-ui] How to reduce bundle size? HOT 3
- [@mui/styles] React 17 dependency HOT 1
- [code-infra] Migration to ESLint v9
- [core] Compatibility with React 19 types HOT 1
- [docs] Introduce User Persona for Enhanced Portuguese/Brazilian Documentation HOT 2
- [material ui][PaginationItem] Pagination Item component crashes due to a null check missing for contrastText HOT 8
- [material-ui] CSS rule "& > *" not working for some components after the migration from v4 to v5 HOT 4
- [material-ui][Grid] faulty wrapping on firefox if container has non-integer pixel width HOT 2
- [material-ui] Cannot globally override `margin`/`margin-*` CSS properties of elements represented by `Typography` HOT 4
- [material-ui][Modal] Enhanced Modals Manager with Multi-step Modal Support and Confirm Modal Component
- [docs-infra] Demo toolbar buttons can't be accessed via keyboard HOT 2
- [question] How can I render a specific value in an Autocomplete component differently? HOT 4
- [docs-infra] Hide Tailwind variables from the dev tools when not used
- [material-ui][Select] Remove focus from the input when the listbox disappears
- [material-ui] Duplicate class names for components
- [material-ui][docs] Improve the Tailwind CSS with Next.js usage section
- [material-ui][Drawer] React does not recognize the slotProps prop HOT 2
- [material-ui][AppRouterCacheProvider] enableCssLayer not working as expected HOT 5
- [material-ui][docs] codemods require certain version of nodejs otherwise fails with "Unexpected token ." HOT 2
- [material-ui][Switch] Undefined/null values in the theme causes crash HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from material-ui.