fix(external-admin): keep RTL styles mounted

This commit is contained in:
zhx 2026-07-15 17:01:47 +08:00
parent d302d8a360
commit c99c94db8e
3 changed files with 31 additions and 11 deletions

View File

@ -0,0 +1,25 @@
import { CacheProvider } from "@emotion/react";
import Button from "@mui/material/Button";
import { createTheme, ThemeProvider } from "@mui/material/styles";
import { render, screen } from "@testing-library/react";
import { expect, test } from "vitest";
import { externalEmotionCache } from "./emotionCache.js";
test("keeps MUI mounted when the live page switches from LTR to RTL", () => {
const view = render(<DirectionProbe direction="ltr" />);
expect(screen.getByRole("button", { name: "ltr" })).toBeInTheDocument();
// Exercise Emotion's real insert pipeline: a standalone Stylis serializer test cannot detect a plugin resolved from a second, incompatible Stylis version.
expect(() => view.rerender(<DirectionProbe direction="rtl" />)).not.toThrow();
expect(screen.getByRole("button", { name: "rtl" })).toBeInTheDocument();
});
function DirectionProbe({ direction }) {
return (
<CacheProvider value={externalEmotionCache(direction)}>
<ThemeProvider theme={createTheme({ direction })}>
<Button sx={{ marginLeft: 1, paddingRight: 2 }}>{direction}</Button>
</ThemeProvider>
</CacheProvider>
);
}

View File

@ -30,7 +30,7 @@
"react": "19.2.5",
"react-dom": "19.2.5",
"react-router-dom": "^7.14.2",
"stylis": "4.4.0",
"stylis": "4.2.0",
"svgaplayerweb": "2.3.2",
"zod": "^4.4.1"
},

15
pnpm-lock.yaml generated
View File

@ -25,7 +25,7 @@ importers:
version: 9.0.0(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.5))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.5))(@types/react@19.2.14)(react@19.2.5))(@types/react@19.2.14)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
'@mui/stylis-plugin-rtl':
specifier: 9.1.1
version: 9.1.1(stylis@4.4.0)
version: 9.1.1(stylis@4.2.0)
'@tanstack/react-query':
specifier: ^5.100.6
version: 5.100.6(react@19.2.5)
@ -45,8 +45,8 @@ importers:
specifier: ^7.14.2
version: 7.14.2(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
stylis:
specifier: 4.4.0
version: 4.4.0
specifier: 4.2.0
version: 4.2.0
svgaplayerweb:
specifier: 2.3.2
version: 2.3.2
@ -1876,9 +1876,6 @@ packages:
stylis@4.2.0:
resolution: {integrity: sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==}
stylis@4.4.0:
resolution: {integrity: sha512-5Z9ZpRzfuH6l/UAvCPAPUo3665Nk2wLaZU3x+TLHKVzIz33+sbJqbtrYoC3KD4/uVOr2Zp+L0LySezP9OHV9yA==}
supports-color@10.2.2:
resolution: {integrity: sha512-SS+jx45GF1QjgEXQx4NJZV9ImqmO2NPz5FNsIHrsDjh2YsHnawpan7SNQ1o8NuhrbHZy9AZhIoCUiCeaW/C80g==}
engines: {node: '>=18'}
@ -2591,11 +2588,11 @@ snapshots:
'@emotion/react': 11.14.0(@types/react@19.2.14)(react@19.2.5)
'@emotion/styled': 11.14.1(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.5))(@types/react@19.2.14)(react@19.2.5)
'@mui/stylis-plugin-rtl@9.1.1(stylis@4.4.0)':
'@mui/stylis-plugin-rtl@9.1.1(stylis@4.2.0)':
dependencies:
'@babel/runtime': 7.29.2
cssjanus: 2.3.1
stylis: 4.4.0
stylis: 4.2.0
'@mui/system@9.0.0(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.5))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.5))(@types/react@19.2.14)(react@19.2.5))(@types/react@19.2.14)(react@19.2.5)':
dependencies:
@ -3844,8 +3841,6 @@ snapshots:
stylis@4.2.0: {}
stylis@4.4.0: {}
supports-color@10.2.2: {}
supports-preserve-symlinks-flag@1.0.0: {}