RTL support while using MUI and PigmentCSS instead of emotion #339

Hadi-bakhshi · 2024-12-04T08:29:49Z

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;

Current behavior

Problem screenshot:

Expected behavior

Context

No response

Your environment

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: rtl in mui with pigmentcss

The text was updated successfully, but these errors were encountered:

Hadi-bakhshi added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Dec 4, 2024

zannager added the package: system Specific to @mui/system label Dec 4, 2024

zannager assigned brijeshb42 Dec 4, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

RTL support while using MUI and PigmentCSS instead of emotion #339

RTL support while using MUI and PigmentCSS instead of emotion #339

Hadi-bakhshi commented Dec 4, 2024 •

edited

Loading

RTL support while using MUI and PigmentCSS instead of emotion #339

RTL support while using MUI and PigmentCSS instead of emotion #339

Comments

Hadi-bakhshi commented Dec 4, 2024 • edited Loading

Issue description

Current behavior

Expected behavior

Context

Your environment

Hadi-bakhshi commented Dec 4, 2024 •

edited

Loading