我想使用 RTL，但不是通过我的所有组件

编程问答 2022-05-30

问题描述

我想在 Nextjs 中为我的一些组件使用 RTL。我也使用 material-ui。不幸的是，当我在 _documents.js 中使用 <HTML dir="rtl"> 改变方向时，我所有组件的方向都会改变。 material-ui 在 createMuiTheme() 中的方向根本不影响方向。

某些组件（如箭头）不得随方向变化。我该怎么做才能防止他们改变方向。

解决方法

Material Ui createMuiTheme 获取方向作为选项本身
我还记得它尊重body标签的方向

因此，要改变组件某些部分的方向，据我所知，您有 3 种方法。

  1. 更改材料 createMuiTheme 中的方向选项

例如可以通过您的主题提供程序组件进行处理

  1. 在您的 rtl 组件周围使用其他材质主题提供程序实例 Theme nesting

  2. 将 dir="rtl" 放在本机 DOM 标签上，如果需要，这些将影响所有较低的子树样式，例如flex-box 方向和 ...

例如

const ARABIC_PATTERN = /[\u0600-\u06FF]/
const getDirection = text => (ARABIC_PATTERN.test(text) ? 'rtl' : 'ltr')


<div dir={getDirection('what you want to test')}>
  <Components />
</div>
,

骇人听闻的建议。这可能不是最好的答案，但如果您只需要“重置”1-2 个元素的位置，它可能会很方便/体面。

首先像您所做的那样反转所有内容，然后在不应“反转”的元素上放置一个 CSS 类：

       <FlatList
        data={this.getData()}
        renderItem={({ item,index }) => this.renderContent(item,index)}
        keyExtractor={(item) => item.time}
        horizontal={true}
        scrollEnabled
        showsHorizontalScrollIndicator={false}
      />

通过这种方式，您基本上是在反转所有内容，然后再次反转具有上述类的元素。

.not-rtl-inteverted {
   transform: scaleX(-1);
}

section {
display: flex;
justify-content: space-around;
}


div {
background: green;
padding: 20px;
margin: 0 10px;
flex-basis: 33%;
}


.rtl {
  transform: scaleX(-1);
}

在示例中，通过使用两次相同的类（一次在父类中，另一次在不需要 rtl 的子类中，我们有这种重置效果）。

同样，对于非常简单的用例可能很方便。我不会建议将此作为您问题的一般解决方案。

directionmaterial-uireactjsreactjsreactjsreactjsright-to-left