MUI5 TextField不受RTL方向的影响
我在我的应用程序中使用了RTL和资料-ui v4，它工作正常。
import React from "react"
import { create } from "jss"
import rtl from "jss-rtl"
import { StylesProvider, jssPreset } from "@mui/styles"
// @ts-ignore
const jss = create({ plugins: [...jssPreset().plugins, rtl()] })
// @ts-ignore
function RTL(props) {
// @ts-ignore
return <StylesProvider jss={jss}>{props.children}</StylesProvider>
}
export default RTL现在，我升级到MUI5。但是rtl不受我的textFields和其他组件的影响。我能做什么?
回答 1
Stack Overflow用户
发布于 2022-01-02 10:23:10
基于文档，以下是正确工作RTL需要执行的一些步骤：
1. ：确保在主体上设置了dir属性，否则本机组件将中断：
<body dir="rtl"></body>作为上述选项的另一种选择，还可以使用dir属性将应用程序包装在元素中：
function App() {
return (
<div dir="rtl">
<MyComponent />
</div>
);
}2.主题：在您的自定义主题中设置方向：
const theme = createTheme({
direction: 'rtl',
});3.安装rtl插件：当使用emotion或styled-components时，需要stylis-plugin-rtl来翻转样式。
npm install stylis stylis-plugin-rtl如果您使用的是jss (直至v4)或旧的@mui/styles包，则需要jss-rtl来翻转样式。
npm install jss-rtl在您的项目中安装了插件之后，MUI组件仍然需要由您使用的样式引擎实例加载它。找到关于如何加载它的下面的指南。
4.加载rtl插件
情绪:如果你使用情感作为你的风格引擎，你应该创建新的缓存实例使用stylis-plugin-rtl，并提供在你的应用程序树的顶部。CacheProvider组件支持以下功能：
import rtlPlugin from 'stylis-plugin-rtl';
import { CacheProvider } from '@emotion/react';
import createCache from '@emotion/cache';
// Create rtl cache
const cacheRtl = createCache({
key: 'muirtl',
stylisPlugins: [rtlPlugin],
});
function RTL(props) {
return <CacheProvider value={cacheRtl}>{props.children}</CacheProvider>;
}4.2样式-组件:如果使用styled-components作为样式引擎，则可以使用StyleSheetManager并在stylisPlugins属性中作为项提供StyleSheetManager-plugin：
import { StyleSheetManager } from 'styled-components';
import rtlPlugin from 'stylis-plugin-rtl';
function RTL(props) {
return (
<StyleSheetManager stylisPlugins={[rtlPlugin]}>
{props.children}
</StyleSheetManager>
);
}4.3 JSS :在您的项目中安装插件之后，您需要配置JSS实例来加载它。下一步是将新的JSS实例提供给组件树中的所有组件。StylesProvider组件支持以下功能：
import { create } from 'jss';
import rtl from 'jss-rtl';
import { StylesProvider, jssPreset } from '@mui/styles';
// Configure JSS
const jss = create({
plugins: [...jssPreset().plugins, rtl()],
});
function RTL(props) {
return <StylesProvider jss={jss}>{props.children}</StylesProvider>;
}
https://stackoverflow.com/questions/70555085
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号