MUI 国际化与 RTL 支持
一、用途
该技能面向使用 MUI（Material UI）构建多语言、双向文本界面的场景，说明如何为阿拉伯语、希伯来语、波斯语、乌尔都语等 RTL 语言配置从右到左布局，并完成组件文案的多语言本地化。
二、RTL 基础设置
- 设置文档方向：在 index.html 的 html 标签上设置 dir 与 lang，例如 <html dir="rtl" lang="ar">。
- 配置 MUI 主题方向：使用 createTheme({ direction: 'rtl' }) 创建 RTL 主题。
- 安装 Emotion RTL 插件：npm install stylis-plugin-rtl stylis
- 使用支持 RTL 的缓存 Provider 包裹应用：通过 @emotion/react 的 CacheProvider、@emotion/cache 的 createCache、@mui/material/styles 的 ThemeProvider 与 stylis-plugin-rtl 的 rtlPlugin、stylis 的 prefixer 组合配置。
三、Emotion RTL 缓存
RTL 缓存会拦截所有 Emotion 生成的样式并翻转方向属性（如 margin-left 变为 margin-right，padding-left 变为 padding-right）。资料给出 RTL 缓存（key 为 muirtl）与 LTR 缓存（key 为 muiltr）的写法，并强调：每个缓存实例的 key 必须唯一；prefixer 用于添加厂商前缀，应始终包含；rtlPlugin 必须排在 prefixer 之后。
四、动态方向切换
可通过 React state 在 LTR 与 RTL 之间运行时切换：使用 useState 保存方向，用 useMemo 根据方向创建主题，切换时同步设置 document.dir。资料示例同时包含 CssBaseline、IconButton 及方向切换图标（FormatTextdirectionLToR、FormatTextdirectionRToL）。重要提示：始终让 document.dir 与主题方向保持同步，使浏览器原生布局与 MUI 一致。
五、组件本地化
MUI 内置 50 多种语言的本地化字符串，可将 locale 对象作为 createTheme 的第二个参数传入。资料列举了常见 locale 引入方式，如 enUS、frFR、esES、jaJP、zhCN、arSA、heIL、koKR、ptBR、trTR。对 RTL 语言，可将 direction 与 locale 组合，例如使用 arSA 并设置 direction: 'rtl' 及对应字体族。
六、MUI X 本地化
MUI X 组件（DataGrid、DatePicker、TreeView）拥有独立 locale 字符串，需分别引入。资料以德语为例，展示如何合并核心 MUI、DataGrid 与 DatePicker 的 locale，并说明 DataGrid 的 locale 覆盖列菜单、工具栏、分页、筛选面板、无数据覆盖层等标签；DatePicker 的 locale 覆盖字段占位与标签、日历导航、工具栏标题、操作栏按钮等。
七、自定义 locale
可通过与内置 locale 深度合并来覆盖单个翻译字符串，资料给出 deepmerge 覆盖 DataGrid 字符串与核心 MUI 字符串（如 MuiTablePagination、MuiAlert）的示例，也展示了不经过主题、直接在 DataGrid 上通过 localeText 属性进行组件级覆盖的方式。
八、Portal 组件与 RTL
基于 Portal 的组件（Dialog、Popper、Menu、Popover、Snackbar、Tooltip）渲染到 document.body 之外，会从 document.dir 继承文档方向，但仍需要 Emotion 缓存与主题上下文才能正确设置样式。当 document.dir 设为 'rtl' 且应用根节点被 rtlCache 的 CacheProvider 包裹时，可自动生效。若同一页面存在多个方向（如 RTL 页面内嵌 LTR 组件），需为 LTR 区域单独包裹 ThemeProvider 与 CacheProvider，并设置 dir="ltr"。
九、双向布局要点
- 图标翻转：有方向含义的图标（箭头、导航 chevron、发送、回复、撤销/重做、文本缩进、列表符号、外部链接）在 RTL 下应镜像或互换；无方向含义的图标（关闭、添加、删除、搜索、设置）不应翻转。资料给出按方向互换图标与使用 scaleX(-1) 翻转两种方式。
- 间距：应使用逻辑属性（如 marginInlineStart、paddingInlineEnd）或 MUI 简写（ml/mr/pl/pr，会被 RTL 插件自动翻转），避免使用会被破坏的物理属性；内联样式（如 style={{ marginLeft: 16 }}）不会被翻转，应优先使用 sx。
- 逻辑 CSS 属性对照：left/right 对应 inset-inline-start/inset-inline-end；margin-left/margin-right 对应 margin-inline-start/margin-inline-end；padding-left/padding-right 对应 padding-inline-start/padding-inline-end；border-left/border-right 对应 border-inline-start/border-inline-end；text-align: left 对应 text-align: start；float: left 对应 float: inline-start。
- 退出 RTL 翻转：对代码块、电话号码、LTR 品牌名等应保持 LTR 的元素，可使用 sx 中的 /* @noflip */ 指令或包裹 dir="ltr" 容器并设置 unicodeBidi: 'embed'。
- 文本输入对齐：输入框会自动继承方向；混合方向输入（如可能包含阿拉伯语或英语的搜索框）可设置 inputProps={{ dir: 'auto' }} 由浏览器自动判断方向。
十、RTL 测试清单
资料给出检查项：确认 document.dir="rtl" 已设置；确认 createTheme({ direction: 'rtl' }) 已配置；确认包裹应用的 CacheProvider 使用 rtlCache；测试所有 Dialog、Menu、Drawer 的打开/关闭；检查导航图标（箭头、chevron）指向是否正确；检查表单布局与标签对齐；检查 DataGrid 列顺序与排序图标；测试 RTL 下的文本省略号截断；检查绝对/固定定位元素；确认滚动条位于左侧。
十一、适用场景与限制
适用场景为使用 React 与 MUI 构建需支持 RTL 语言及多语言组件文案的界面。资料未说明该技能的收费、价格、平台或其他效果，这些信息暂未提供。