个人中心
gpt4 book ai didi

material-ui - Material UI RTL

转载 作者：行者123 更新时间：2023-12-04 13:45:12 24 4
gpt4 key购买 nike

Material ui 指南中提供的 RTL 演示似乎不适用于组件。
正如他们在 Right-to-left guide 中所说的那样在内部，当 direction: 'rtl' 设置在主题上时，它们会动态启用 jss-rtl 插件，但在演示中只有 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;

最佳答案

Once you have created a new JSS instance with the plugin, you need to make it available to all components in the component tree. JSS has a JssProvider component for this:



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>
  );
}

关于material-ui - Material UI RTL，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50295770/

24 4 0
文章推荐： python - matplotlib 中是否有最大 figsize？
文章推荐： python-3.x - 在 python 中创建子图 plotly
文章推荐： git - 更改 git branch -vv 的格式
文章推荐： intellij-idea - 复制，然后注释掉 IntelliJ 中的一行
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com