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.

Sign up for GitHub

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

Jump to bottom

[v6] Right-to-left breaking styles on refresh browser #44072

Closed
mtr1990 opened this issue Oct 11, 2024 · 2 comments
Closed

[v6] Right-to-left breaking styles on refresh browser #44072

mtr1990 opened this issue Oct 11, 2024 · 2 comments
Labels
nextjs package: material-ui Specific to @mui/material support: question Community support but can be turned into an improvement

Comments

@mtr1990
Copy link

mtr1990 commented Oct 11, 2024 •
edited by github-actions bot
Loading

Steps to reproduce

Examples are built upon:

Demo:
https://stackblitz.com/edit/github-h7mcho?file=src%2Fcomponents%2FRtl.tsx,src%2Fapp%2Flayout.tsx,src%2Fapp%2Fpage.tsx

Current behavior

Style structure is broken when refreshing the browser

right-to-left.mp4

Expected behavior

Doesn't break when refreshing the browser.

Context

The demo only builds the hard value rtl.

In practice these props can convert between ltr and rtl

Your environment

No response

Search keywords: Right to left
@mtr1990 mtr1990 added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Oct 11, 2024
@oliviertassinari oliviertassinari changed the title [Mui v6] Right-to-left breaking styles on refresh browser [v6] Right-to-left breaking styles on refresh browser Oct 11, 2024
@siriwatknp
Copy link
Member

You can pass stylis plugins to AppRouterCacheProvider via options prop:

import options from '../../options'; // need to move options to client file because `rtlPlugin` is a function. Next.js will throw an error if pass directly in layout.tsx
<AppRouterCacheProvider options={options}>

// options.ts
'use client';
export const options = {
  key: 'mui',
  stylisPlugins: [prefixer, rtlPlugin],
}

Also, you need to pass dir="rtl" directly to <html dir="rtl">

https://stackblitz.com/edit/github-h7mcho-6b8hms?file=src%2Fapp%2Fpage.tsx,src%2Fapp%2Flayout.tsx,options.ts

@siriwatknp siriwatknp added support: question Community support but can be turned into an improvement package: material-ui Specific to @mui/material nextjs and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Oct 14, 2024
@github-actions GitHub Actions
Copy link

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

@mtr1990 How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
nextjs package: material-ui Specific to @mui/material support: question Community support but can be turned into an improvement
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@mtr1990 @siriwatknp