[docs] Fix RTL data grid demo (#10728)

mui · Oct 22, 2023 · 604aa81 · 604aa81
1 parent b99c0d7
commit 604aa81
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 16 deletions.
diff --git a/docs/data/data-grid/localization/DataGridRTL.js b/docs/data/data-grid/localization/DataGridRTL.js
@@ -1,7 +1,17 @@
 import * as React from 'react';
+import { prefixer } from 'stylis';
+import rtlPlugin from 'stylis-plugin-rtl';
 import { DataGrid, arSD } from '@mui/x-data-grid';
+import createCache from '@emotion/cache';
+import { CacheProvider } from '@emotion/react';
 import { createTheme, ThemeProvider, useTheme } from '@mui/material/styles';
 
+// Create rtl cache
+const cacheRtl = createCache({
+  key: 'data-grid-rtl-demo',
+  stylisPlugins: [prefixer, rtlPlugin],
+});
+
 const columns = [
   {
     field: 'id',
@@ -40,7 +50,9 @@ const rows = [
 ];
 
 export default function DataGridRTL() {
+  // Inherit the theme from the docs site (dark/light mode)
   const existingTheme = useTheme();
+
   const theme = React.useMemo(
     () =>
       createTheme({}, arSD, existingTheme, {
@@ -49,10 +61,12 @@ export default function DataGridRTL() {
     [existingTheme],
   );
   return (
-    <ThemeProvider theme={theme}>
-      <div dir="rtl" style={{ height: 400, width: '100%' }}>
-        <DataGrid rows={rows} columns={columns} />
-      </div>
-    </ThemeProvider>
+    <CacheProvider value={cacheRtl}>
+      <ThemeProvider theme={theme}>
+        <div dir="rtl" style={{ height: 400, width: '100%' }}>
+          <DataGrid rows={rows} columns={columns} />
+        </div>
+      </ThemeProvider>
+    </CacheProvider>
   );
 }
diff --git a/docs/data/data-grid/localization/DataGridRTL.tsx b/docs/data/data-grid/localization/DataGridRTL.tsx
@@ -1,7 +1,17 @@
 import * as React from 'react';
+import { prefixer } from 'stylis';
+import rtlPlugin from 'stylis-plugin-rtl';
 import { DataGrid, GridColDef, arSD } from '@mui/x-data-grid';
+import createCache from '@emotion/cache';
+import { CacheProvider } from '@emotion/react';
 import { createTheme, ThemeProvider, useTheme } from '@mui/material/styles';
 
+// Create rtl cache
+const cacheRtl = createCache({
+  key: 'data-grid-rtl-demo',
+  stylisPlugins: [prefixer, rtlPlugin],
+});
+
 const columns: GridColDef[] = [
   {
     field: 'id',
@@ -40,7 +50,9 @@ const rows = [
 ];
 
 export default function DataGridRTL() {
+  // Inherit the theme from the docs site (dark/light mode)
   const existingTheme = useTheme();
+
   const theme = React.useMemo(
     () =>
       createTheme({}, arSD, existingTheme, {
@@ -49,10 +61,12 @@ export default function DataGridRTL() {
     [existingTheme],
   );
   return (
-    <ThemeProvider theme={theme}>
-      <div dir="rtl" style={{ height: 400, width: '100%' }}>
-        <DataGrid rows={rows} columns={columns} />
-      </div>
-    </ThemeProvider>
+    <CacheProvider value={cacheRtl}>
+      <ThemeProvider theme={theme}>
+        <div dir="rtl" style={{ height: 400, width: '100%' }}>
+          <DataGrid rows={rows} columns={columns} />
+        </div>
+      </ThemeProvider>
+    </CacheProvider>
   );
 }
diff --git a/docs/data/data-grid/localization/DataGridRTL.tsx.preview b/docs/data/data-grid/localization/DataGridRTL.tsx.preview
@@ -1,5 +1,7 @@
-<ThemeProvider theme={theme}>
-  <div dir="rtl" style={{ height: 400, width: '100%' }}>
-    <DataGrid rows={rows} columns={columns} />
-  </div>
-</ThemeProvider>
+<CacheProvider value={cacheRtl}>
+  <ThemeProvider theme={theme}>
+    <div dir="rtl" style={{ height: 400, width: '100%' }}>
+      <DataGrid rows={rows} columns={columns} />
+    </div>
+  </ThemeProvider>
+</CacheProvider>
diff --git a/docs/package.json b/docs/package.json
@@ -93,6 +93,7 @@
     "@babel/plugin-transform-react-constant-elements": "^7.22.5",
     "@babel/preset-typescript": "^7.23.2",
     "@types/doctrine": "^0.0.7",
+    "@types/stylis": "^4.2.0",
     "cpy-cli": "^5.0.0",
     "gm": "^1.25.0",
     "typescript-to-proptypes": "^2.2.1"

diff --git a/yarn.lock b/yarn.lock
@@ -3070,7 +3070,7 @@
   resolved "https://registry.yarnpkg.com/@types/sinonjs__fake-timers/-/sinonjs__fake-timers-8.1.1.tgz#b49c2c70150141a15e0fa7e79cf1f92a72934ce3"
   integrity sha512-0kSuKjAS0TrGLJ0M/+8MaFkGsQhZpB6pxOmvS3K8FYI72K//YmdfoW9X2qPsAKh1mkwxGD5zib9s1FIFed6E8g==
 
-"@types/stylis@^4.0.2":
+"@types/stylis@^4.0.2", "@types/stylis@^4.2.0":
   version "4.2.2"
   resolved "https://registry.yarnpkg.com/@types/stylis/-/stylis-4.2.2.tgz#baabb6b3aa6787e90a6bd6cd75cd8fb9a4f256a3"
   integrity sha512-Rm17MsTpQQP5Jq4BF7CdrxJsDufoiL/q5IbJZYZmOZAJALyijgF7BzLgobXUqraNcQdqFYLYGeglDp6QzaxPpg==