material-ui - Material UI RTL-6ren

material-ui - Material UI RTL

转载作者：行者123 更新时间：2023-12-04 13:45:12

24

4

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 中的一行

iOS RTL - 在 RTL 字符串中不正确地显示英语
iOS 应用程序，我们要显示来自服务器的新闻。使用UIlabel 当他只用一种语言而不考虑布局时，一切都是完美的(我们正在将布局 RTL 切换为 LTR，以适应不同的语言，包括阿拉伯语、希伯来语) 当
android - RTL 在 RTL 设备中是强制的
新版本的 React Native 已经发布了对 RTL 设备的支持: https://facebook.github.io/react-native/blog/2016/08/19/right-to
Material-UI V5 RTL with stylis-plugin-rtl
我将 Material UI 5 与 next.js 一起使用，并使用 emotion 和 stylis-plugin-rtl v2 实现了与此处文档完全相同的每个步骤: https://next.m
css: 目录 ="rtl"VS 样式 ="direction:rtl"
我知道如何在方向为内联时设置样式 foo div[dir="rtl"] { ....; } 但是如何设置样式 foo ? 两者的行为都符合预期(文本的右“对齐”)，但我需要对内部的某些元素进行更精细
android - 该项目引用 RTL 属性，但未明确启用或禁用 RTL 支持
这个问题在这里已经有了答案: What is use of android:supportsRtl="true" in AndroidManifest xml file (4 个回答) 关闭4年前。
reactjs - Material-ui jss-rtl - 使用 jss-rtl 后我的页面仍然是 LTR
我正在使用material-ui和next和jss-rtl在我的react项目但是有一个问题页面仍然是ltr使用后 -rtl组件代码: import React from "react"; impor
vhdl - vivado block 设计器在修改 verilog 或 vhdl RTL 文件后不更新 block 设计中的 RTL 接口(interface)
我敢发誓，vivado 有一个错误，它永远不会刷新对 RTL 文件、verilog 或 vhdl 所做的任何接口(interface)更改，在使用“添加模块”将其粘贴到“ block 设计”后....
javascript - 无法从 'C:\Users\syrine\management\node_modules\stylis-plugin-rtl\src\stylis-rtl.ts' 解析源映射
我正在尝试将 react Material 模板添加到我的 reactJs 项目中。我修复了所有错误，但我无法修复这个错误 WARNING in ./node_modules/stylis-plugi
Android 从右到左绘制一个矩形 (rtl)
我在 android 中构建一个绘图应用程序，我在绘制矩形时注意到一个问题。应该根据语法绘制矩形 new Rect(left, top, right, bottom) 现在我的逻辑通过取起点 (sta
tinymce - 将默认方向设置为 RTL
我将 Tinymce 编辑器安装到我的网站。现在我需要将默认方向设置为 RTL 而不是 LTR。您可以在下面看到-- tinymce.init({ selector: 'textar
Android RTL 支持形状角半径
我注意到没有 bottomEndRadius在形状中，而只是 bottomRightRadius 是否有任何解决方法来支持从右到左的布局？最佳答案我发现的唯一方法是为 R
jQuery 同位素 RTL
我使用此代码来运行具有 RTL 支持的 Isotope $.Isotope.prototype._positionAbs = function( x, y ) { return { right:
iphone - RTL 在行尾显示数字
尝试显示以数字开头的希伯来语字符串，总是在字符串末尾显示数字，如下所示:1. йום שйשй בבוקר 但我需要在文本右侧显示数字- 有什么解决办法吗？它发生在 UILabel & UIText
reactjs - 如何在手机语言更改时禁用 rtl？
我在 react-native 中创建了一个应用程序，当电话语言为 En 时一切正常，但是当我更改电话语言时，UI 崩溃并且一切都向后我在用 "react": "16.6.3", "reac
WordPress 和 RTL
WordPress 非常强大......但对于阿拉伯语和希伯来语等 RTL 语言却很弱......我需要让前端使用阿拉伯语，而管理区域则需要使用英语，当然还有 LTR。如果我使用阿拉伯语版本的Word
android - 带Camera2的Android RTL
我想知道为什么将Camera2 API与RTL语言一起使用时，摄像机预览会有所不同。具体来说，我有两个问题: 使用RTL时，相机上是否有任何特定设置？我正在通过OpenCV使用边缘检测。 OpenC
JQuery 菜单图标 RTL
我正在尝试在阿拉伯语 RTL 页面中使用 jQuery 菜单。我可以将其设为 RTL，但图标应该是 ui-icon-carat-1-w 而不是 ui-icon-carat-1-e。我创建了jsfidd
c# - 在输入字段中写入 RTL
我正在尝试在统一输入字段中编写波斯语。波斯语是从右到左的语言，其字母与阿拉伯语相似。我找到了 library转换和更正文本。它工作得很好。当我将转换后的文本显示为 Debug.Log() 时，一切都
java - 以编程方式更改导航栏方向 (RTL)
我的应用程序支持 4 种不同的语言，其中两种是从右到左编写的。如果我从 android 系统更改语言然后启动我的应用程序，一切正常。我得到一个镜像布局 (RTL)，甚至导航栏也是镜像的。我的问题是
android - RTL 对齐不适用于长文本
我正在设计一种布局，该布局在不同的 View 中同时包含英语和希伯来语(旨在从右到左)文本。当一行希伯来语文本超过一定长度时，它会变成从左到右书写(我认为这与长度有关，因为它在较短的文本上看起来很好，

首页

博学

6Ren·AI

商城

material-ui - Material UI RTL