-
-
Notifications
You must be signed in to change notification settings - Fork 32.3k
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
[zero-runtime] Add RTL support #41217
Comments
Context usage makes most sense to me given at some point, server context is also available. |
I'll work on a POC to see how we can do this. |
How are we supposed to do default component prop changes? https://mui.com/material-ui/customization/theme-components/#theme-default-props
In theory from emotion-js/emotion#2978 (comment), but never used this in prod. |
|
What about this as well? https://mui.com/material-ui/react-use-media-query/#using-material-uis-breakpoint-helpers. It doesn't seem that static extraction should mean that we drop theme nesting support or the theme provider. Issue opened #43443. Just from a migration perspective, this would make it easier. |
A possible selector we can rely on |
Summary
We need to have a way to provide rtl for the zero-runtime. We have to support rtl for partial parts of the app, so we can't depend on it living only in the theme config.
Proposed API
In the emotion based styling solution the RTL is supported trough the ThemeProvider, as a key in the theme (
theme.direction
). Considering that in the zero-runtime we won’t have ThemeProvider, but only a component that will inject CSS vars, this means that we will need a separate provider specific to rtl.The components that need to support rtl, will read this context, e.g.
Drawer
,LinearProgress
,Menu
,MenuList
,PaginationItem
,Rating
,Slider
,TablePaginationActions
,Tabs
,TabsScrollButton
,Tooltip
.The rtl value can be propagated as part of the ownerState in the styled call.
Search keywords: rtl, zero-runtime
The text was updated successfully, but these errors were encountered: