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

Question

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

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

Answer 1

骇人听闻的建议。这可能不是最佳答案，但如果您只需要“重置”1-2 个元素的位置，它可能是 handy/decent。

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

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

这样，您基本上是在反转所有内容，然后再次反转上面带有 class 的元素。

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>

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

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

Answer 2

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

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

material createMuiTheme

It could be handle via your theme provider component for example

在您的 rtl 组件周围使用 material 主题提供程序的其他实例 Theme nesting
将 dir="rtl" 放在原生 DOM 标签上，如果您需要，这些将影响所有较低的子树样式，例如弹性框方向和 ...

例如

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


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

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

I want to use RTL, but not through all of my components

reactjs

material-ui

next.js

right-to-left

direction