Setup MUI RTL Project with stylis-plugin-rtl next js 14

Byadmin

 

## Root page code (layout.js)

"use client";
import { useState } from "react";
import cacheRtl from "./rtlCache"; // RTL cache
import createCache from "@emotion/cache"; // Create LTR cache
import { ThemeProvider } from "@mui/material/styles";
import { CacheProvider } from "@emotion/react";
import CssBaseline from "@mui/material/CssBaseline";

// Create a separate cache for LTR
const cacheLtr = createCache({
  key: "mui-ltr",
  stylisPlugins: [],
});

export default function RootLayout({ children }) {
  const [direction, setDirection] = useState("rtl"); // Default to RTL

  return (
    <html lang="he" dir={direction}>
      <body>
        <CacheProvider value={direction === "rtl" ? cacheRtl : cacheLtr}>
          <ThemeProvider theme={{ ...theme, direction }}>
            <CssBaseline />
            <Header />
            <main>{children}</main>
            <Footer />
          </ThemeProvider>
        </CacheProvider>
      </body>
    </html>
  );
}

### Rtl Cache.js

import createCache from "@emotion/cache";
import rtlPlugin from "stylis-plugin-rtl";
import { prefixer } from "stylis";
const cacheRtl = createCache({
  key: "muirtl",
  stylisPlugins: [prefixer, rtlPlugin],
});

export default cacheRtl;

 ## example

<TextField
dir="rtl"
label="name"
name="name"
fullWidth
sx={{
mb:2,
}}
/>