reactjs - Material-UI - 支持 babel-plugin-react-css-modules 和 rtl app-6ren

reactjs - Material-UI - 支持 babel-plugin-react-css-modules 和 rtl app

转载作者：行者123 更新时间：2023-12-01 21:49:20

26

4

Material 用户界面:v4.8.2
react :v16.12.0

带有 rtl 应用程序的 babel-plugin-react-css-modules - 我想使用 injectFirst 但后来我收到警告:Material-UI:您不能同时使用 jss 和 injectFirst Prop 。

我的猜测是我应该以不同的方式定义 jss，以便它支持 rtl 和 css 模块。

// Configure JSS - How should I add here the css-modules styles?
const jss = create({ plugins: [...jssPreset().plugins, rtl()] });

对于 rtl 我应该这样做:

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

<StylesProvider jss={jss}>
            <ThemeProvider theme={theme}>
                <AppContainer />
            </ThemeProvider>);
        </StylesProvider>

对于 css-modules 样式我应该做的:

<StylesProvider injectFirst>
            <ThemeProvider theme={theme}>
                <AppContainer />
            </ThemeProvider>);
        </StylesProvider>

谁能告诉我应该如何将两者结合起来？

最佳答案

终于解决了。

执行以下操作:

添加jss-insertion-point就在 <head> 下面

<head>
     <!-- jss-insertion-point -->
     ...
</head>

根.js:

    import rtl from 'jss-rtl';
    import { StylesProvider, jssPreset } from '@material-ui/core/styles';

    let jss = create({
      plugins: [...jssPreset().plugins, rtl()],
      insertionPoint: 'jss-insertion-point',
    });

    const Root = () => (
       <Provider store={store}>
           <StylesProvider jss={jss}>
               <ThemeProvider theme={theme}>
                    <Router history={history} routes={routes}/>
               </ThemeProvider>);
           </StylesProvider>
       </Provider>
    );

export default Root;

关于reactjs - Material-UI - 支持 babel-plugin-react-css-modules 和 rtl app，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59753893/

26

4

0

文章推荐： javascript - 如何使用 chart.js 在饼图中的切片内显示切片值

文章推荐： php - Laravel Text 不显示 True/False，而是 0/1

文章推荐： apache-kafka - kafka 消费者机器是否需要运行 zookeeper？

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

商城

reactjs - Material-UI - 支持 babel-plugin-react-css-modules 和 rtl app