跳转到内容

从右到左读取

支持从右到左的语言,如阿拉伯语(Arabic)、波斯语(Persian )或希伯来语(Hebrew )。 要更改 Material-UI 组件的读取方向,您必须执行以下步骤。

步骤

1. HTML

确保在 body 上设置了 dir 属性,否则本机组件将中断:

<body dir="rtl">

2. 主题

在您自定义的主题中设置方向:

const theme = createMuiTheme({
  direction: 'rtl',
});

3。 安装 rtl 插件

你需要这个 JSS 插件来翻转样式: jss-rtl

npm install jss-rtl

如果你正在使用 emotion 或者 styled-components,你需要使用该插件来翻转样式: stylis-plugin-rtl

npm install stylis-plugin-rtl@^1

注意:emotionstyled-components 目前都兼容该插件的 v1 版本。

在你的项目中安装了该插件后,Material-UI 组件仍然需要通过你使用的样式引擎实例来加载它。 下面的指南讲述了如何进行加载。

3。 加载 rtl 插件

3.1 JSS

如下所述,在项目中安装了插件后,Material-UI 组件仍然需要通过 jss 实例来加载。 在内部,若 direction: 'rtl' 上在主题设置了,withStyles 则会使用该 JSS 插件 。 请前往 此插件的 README 来了解更多信息。

一旦您通过插件创建了一个新的 JSS 实例,您需要提给组件树中的所有组件。 我们有一个 StylesProvider 组件来服务这个需求:

import { create } from 'jss';
import rtl from 'jss-rtl';
import { StylesProvider, jssPreset } from '@material-ui/core/styles';

// 配置 JSS
const jss = create({
  plugins: [...jssPreset().plugins, rtl()],
});

function RTL(props) {
  return <StylesProvider jss={jss}>{props.children}</StylesProvider>;
}

3.2 emotion

如果你的样式引擎的是 emotion,那么你应该创建并使用 stylis-plugin-rtl 的新缓存实例,并将其提供在你应用程序树的顶部。 CacheProvider 组件实现了这一点:

import rtlPlugin from 'stylis-plugin-rtl';
import { CacheProvider } from '@emotion/react';
import createCache from '@emotion/cache';

// 创建 rtl 缓存
const cacheRtl = createCache({
  key: 'muirtl',
  stylisPlugins: [rtlPlugin],
});

function RTL(props) {
  return <CacheProvider value={cacheRtl}>{props.children}</CacheProvider>;
}

3.3 styled-components

如果你的样式引擎是 styled-components,那么你可以使用 StyleSheetManager,并在 stylisPlugins 属性中将 stylis-plugin-rtl 作为项目(item)提供。

import { StyleSheetManager } from 'styled-components';
import rtlPlugin from 'stylis-plugin-rtl';

function RTL(props) {
  return (
    <StyleSheetManager stylisPlugins={[rtlPlugin]}>
      {props.children}
    </StyleSheetManager>
  );
}

演示

请使用右上角的方向切换按钮来翻转整个文档。

<ThemeProvider theme={theme}>
  <div dir="rtl">
    <TextField placeholder="Name" variant="standard" />
    <input type="text" placeholder="Name" />
  </div>
</ThemeProvider>

选择退出 rtl 转换

JSS

若您想避免一个特殊的特定规则受到 rtl 转换的影响,您可以在最开始时加上 flip: false

请使用右上角的方向切换按钮来查看效果。

Affected
Unaffected
<div className={classes.affected}>Affected</div>
<div className={classes.unaffected}>Unaffected</div>

emotion & styled-components

你必须使用模板文字语法,并在你要禁用从右到左(right-to-left)样式的规则或属性前添加 /* @noflip */ 指令。

请使用右上角的方向切换按钮来查看效果。

Affected
Unaffected
<ThemeProvider theme={theme}>
  <Root>
    <AffectedText>Affected</AffectedText>
    <UnaffectedText>Unaffected</UnaffectedText>
  </Root>
</ThemeProvider>