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

RTL styles incorrect using Material UI and PigmentCSS #44647

Closed
Hadi-bakhshi opened this issue Dec 4, 2024 · 11 comments · Fixed by mui/pigment-css#350
Closed

RTL styles incorrect using Material UI and PigmentCSS #44647

Hadi-bakhshi opened this issue Dec 4, 2024 · 11 comments · Fixed by mui/pigment-css#350
Assignees
@brijeshb42
Labels
bug 🐛 Something doesn't work package: pigment-css Specific to @pigment-css/*

Comments

@Hadi-bakhshi
Copy link

Hadi-bakhshi commented Dec 4, 2024 •
edited by mj12albert
Loading

https://stackblitz.com/edit/stackblitz-starters-pqvb1t?file=app%2Fpage.tsx

Issue description

I’m trying to use MUI with PigmentCSS. As you mentioned that RTL support is available, we followed your guide. Our configuration is provided below. However, we were unable to fully enable RTL. What should we do?

next.config.ts:

import { composePlugins, withNx } from "@nx/next";
import { withPigment } from "@pigment-css/nextjs-plugin";
import { pigmentConfig } from "./src/theme/theme";
/**
 * @type {import('@nx/next/plugins/with-nx').WithNxOptions}
 **/
const nextConfig = {
  nx: {
    // Set this to true if you would like to use SVGR
    // See: https://github.com/gregberge/svgr
    svgr: false,
  },
};

const plugins = [
  // Add more Next.js plugins to this list if needed.
  withNx,
];

export default composePlugins(...plugins)(withPigment(nextConfig, pigmentConfig));

pigment config:

export const pigmentConfig: PigmentOptions = {
  transformLibraries: ["@mui/material"],
  theme: createTheme({
    direction: "rtl",
    cssVariables: {
      colorSchemeSelector: "class",
      cssVarPrefix: "nyx",
    },
  }),
  css: {
    defaultDirection: "rtl",
    generateForBothDir: false,
  },
};

layout.tsx

import "./global.scss";
import "@mui/material-pigment-css/styles.css";
import InitColorSchemeScript from "@mui/material/InitColorSchemeScript";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="fa" dir="rtl" className="light">
      <body>
        <InitColorSchemeScript attribute="class" defaultMode="light" />
        {children}
      </body>
    </html>
  );
}

component I'm using material components:

import { TextField, Typography } from "@mui/material";
import Box from "@mui/material-pigment-css/Box";
import React from "react";

const TestCompo = () => {
  return (
    <Box sx={{ display: "flex", flexDirection: "column", height: "100%", gap: "10px", marginTop: "1rem" }}>
      <TextField label="عنوان به صورت تستی" />
      <TextField label="شماره دو" />
      <TextField label="شماره 3" />
      <Typography>درود بر همگی</Typography>
    </Box>
  );
};

export default TestCompo;

Problem screenshot:

image

Context

No response

Search keywords: rtl in mui with pigmentcss
@Hadi-bakhshi Hadi-bakhshi added status: waiting for maintainer These issues haven't been looked at yet by a maintainer support: docs-feedback Feedback from documentation page labels Dec 4, 2024
@mj12albert mj12albert added package: pigment-css Specific to @pigment-css/* and removed support: docs-feedback Feedback from documentation page labels Dec 4, 2024
@mj12albert mj12albert changed the title RTL support while using MUI and PigmentCSS instead of emotion RTL styles incorrect while using MUI and PigmentCSS Dec 4, 2024
@mj12albert mj12albert added the bug 🐛 Something doesn't work label Dec 4, 2024
@mj12albert mj12albert changed the title RTL styles incorrect while using MUI and PigmentCSS RTL styles incorrect using Material UI and PigmentCSS Dec 4, 2024
@mj12albert
Copy link
Member

@Hadi-bakhshi Thanks for reporting this ~ would you be able to share a repro in CSB/Stackblitz as well?

@Hadi-bakhshi
Copy link
Author

@Hadi-bakhshi Thanks for reporting this ~ would you be able to share a repro in CSB/Stackblitz as well?

I'm so sorry but it's a private repository and I can't share it. But I will create another repo with the same condition and I'll share it with you asap.

@Hadi-bakhshi
Copy link
Author

@Hadi-bakhshi Thanks for reporting this ~ would you be able to share a repro in CSB/Stackblitz as well?

https://stackblitz.com/edit/stackblitz-starters-pqvb1t?file=app%2Fpage.tsx

@mj12albert mj12albert removed the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Dec 4, 2024
@DiegoAndai DiegoAndai moved this to Selected in Material UI Dec 5, 2024
@ChayaCodes
Copy link

@Hadi-bakhshi
Have you tried following the 3 steps in this guide?
https://mui.com/material-ui/customization/right-to-left/

@Hadi-bakhshi
Copy link
Author

@Hadi-bakhshi
Have you tried following the 3 steps in this guide?
https://mui.com/material-ui/customization/right-to-left/

The thing is that we migrated to PigmentCSS from emotion and this configuration is for emotion, we tried it and didn't work. we confronted an error.

@brijeshb42
Copy link
Contributor

Update: I've found the issue. Just need to look into the fix.

@brijeshb42
Copy link
Contributor

@Hadi-bakhshi Please set generateForBothDir: true for now till a proper fix lands in Pigment CSS.

@Hadi-bakhshi
Copy link
Author

You mean there's no solution for now?

@DiegoAndai DiegoAndai moved this from Selected to In progress in Material UI Dec 16, 2024
@brijeshb42
Copy link
Contributor

No. It's a bug on Pigment side. The temporary workaround is to set generateForBothDir: true

@Hadi-bakhshi
Copy link
Author

No. It's a bug on Pigment side. The temporary workaround is to set generateForBothDir: true

Ok thank you for your efforts. Waiting for the new version

brijeshb42 pushed a commit to brijeshb42/pigment-css that referenced this issue Dec 17, 2024
fix: use the correct serializer based on the direction value
e23645c 
Curently, the assumption was that the rtl css would only be needed as an
addon.
Fixed this to always use an explicit direction serializer based on the
direction.
Also, the Vite plugin was not passing on the direction information to
pre-processor. This has been fixed.

Fixes mui/material-ui#44647
@brijeshb42 brijeshb42 mentioned this issue Dec 17, 2024
Merged
1 task
@github-project-automation github-project-automation bot moved this from In progress to Done in Material UI Dec 19, 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

@Hadi-bakhshi 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

@brijeshb42 brijeshb42

Labels
bug 🐛 Something doesn't work package: pigment-css Specific to @pigment-css/*
Projects
Material UI
Status: Done
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix: use the correct serializer based on the direction value brijeshb42/pigment-css
4 participants
@brijeshb42 @mj12albert @ChayaCodes @Hadi-bakhshi