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

【问题标题】：I want to use RTL, but not through all of my components我想使用 RTL，但不是通过我的所有组件
【发布时间】：2021-01-16 13:27:59
【问题描述】：

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

某些组件（如箭头）不得随方向而改变。我应该怎么做才能保证他们不会改变方向。

【问题讨论】：

标签： reactjs material-ui next.js right-to-left direction

【解决方案1】：

Material Ui createMuiTheme get direction 作为一个选项本身
_{我还记得它尊重body标签的方向}

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

材料createMuiTheme中的更改方向选项

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

在您的 rtl 组件周围使用其他材料主题提供程序实例 Theme nesting
将 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>

【讨论】：

谢谢阿米尔侯赛因。我已经尝试过你的方法，但不幸的是它对我不起作用。 @GBra 在您的答案下方提出了解决此问题的另一种方法。我试过了，效果很好。
唯一重要的是你的问题现在已经解决了 :)，我以某种方式写了那个繁荣的答案

【解决方案2】：

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

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

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

<section>

<div>
<p>No RTL</p>
</div>


<div>
<p>Yes RTL</p>
</div>


<div>
<p>Yes RTL - but reset it on the 2nd line (by applying the same CSS class again)</p>
</div>

</section>



<section>

<div>
<p>text 1</p>
<p>text 2</p>
</div>


<div class="rtl">
<p>text 1</p>
<p>text 2</p>
</div>


<div class="rtl">
<p>text 1</p>
<p class="rtl">text 2</p>
</div>

</section>

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

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

【讨论】：

感谢您的帮助。它帮助很大。