Material ui 材料界面RTL_Material Ui

Material ui 材料界面RTL

material-ui

Material ui 材料界面RTL,material-ui,Material Ui,材质ui指南中提供的RTL演示似乎不适用于组件。正如他们在内部所说，当主题上设置了方向：“rtl”时，他们会动态启用jss rtl插件，但在演示中，只有html输入是rtl，而TextField不是这是来自的演示代码从“React”导入React；从“材质ui/样式”导入{MuiThemeProvider，createMuiTheme}；从“物料界面/文本字段”导入文本字段； const theme=createMuiTheme({ 方向：“rtl”，//此处和 }); 函数方向（）{

材质ui指南中提供的RTL演示似乎不适用于组件。正如他们在内部所说，当主题上设置了方向：“rtl”时，他们会动态启用jss rtl插件，但在演示中，只有html输入是rtl，而TextField不是

这是来自的演示代码

从“React”导入React；
从“材质ui/样式”导入{MuiThemeProvider，createMuiTheme}；
从“物料界面/文本字段”导入文本字段；
const theme=createMuiTheme({
方向：“rtl”，//此处和
});
函数方向（）{
返回(
);
}
导出默认方向；

一旦你用插件创建了一个新的JSS实例，你需要使其可用于组件树中的所有组件。JSS有一个

JssProvider

为此提供组件：

从'jss'导入{create}；
从“jss rtl”导入rtl；
从“react jss/lib/JssProvider”导入JssProvider；
从'@material ui/core/styles'导入{createGenerateClassName，jssPreset}；
//配置JSS
const jss=create（{plugins:[…jssPreset（）.plugins，rtl（）]}）；
//自定义材质UI类名生成器。
const generateClassName=createGenerateClassName（）；
功能RTL（道具）{
返回(
{props.children}
);
}

import React from 'react';
import { MuiThemeProvider, createMuiTheme } from 'material-ui/styles';
import TextField from 'material-ui/TextField';

const theme = createMuiTheme({
    direction: 'rtl', // Both here and <body dir="rtl">
});

function Direction() {
    return (
        <MuiThemeProvider theme={theme}>
            <div dir="rtl">
                <TextField label="Name" />
                <input type="text" placeholder="Name" />
            </div>
        </MuiThemeProvider>
    );
}

export default Direction;