从右到左读取

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

步骤

1。 HTML

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

<body dir="rtl">

2。主题

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

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

3。 jss-rtl

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

npm install jss-rtl

如下所述，在项目中安装了插件后，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';

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

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

演示

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

选择退出 rtl 转换

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

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

从右到左读取

步骤

1。 HTML

2。 主题

3。 jss-rtl

演示

选择退出 rtl 转换

2。主题