问材料UI RTL
EN

Stack Overflow用户

提问于 2018-05-11 15:39:32

回答 1查看 2.2K关注 0票数 4

材料ui指南中提供的RTL演示似乎不适用于组件。正如他们在从右到左向导内部说的，当方向：' rtl‘被设置在主题上时，他们动态地启用jss插件，但是在演示中，只有html输入是rtl，而TextField不是。

下面是来自https://material-ui-next.com/guides/right-to-left/#demo的演示代码

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;

material-ui

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-07-16 05:00:00

一旦您用插件创建了一个新的JSS实例，就需要将它提供给组件树中的所有组件。JSS有一个用于此的JssProvider组件：

import { create } from 'jss';
import rtl from 'jss-rtl';
import JssProvider from 'react-jss/lib/JssProvider';
import { createGenerateClassName, jssPreset } from '@material-ui/core/styles';

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

// Custom Material-UI class name generator.
const generateClassName = createGenerateClassName();

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

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/50295770

复制

相似问题

问材料UI RTL
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问材料UI RTLEN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问材料UI RTL
EN