我想在Nextjs中使用RTL的一些组件。我也使用material-ui。不幸的是，当我在_documents.js中改变方向时对于<HTML dir="rtl">，所有分量的方向都会改变。材料-ui在createMuiTheme()中的方向完全不影响方向。
一些组件(如箭头)不能根据方向改变。我该怎么做才能不让它们改变方向呢?
Material Ui createMuiTheme get direction作为一个选项本身
我还记得它尊重body标签的方向
要改变组件的某个部分的方向，据我所知有三种方法。
- 改变材料
createMuiTheme方向选项
可以通过主题提供程序组件处理，例如
-
在rtl组件周围使用其他材料主题提供商实例主题嵌套
-
把dir ="rtl"在原生DOM标签上，如果你想要flex-box direction和…，这些将影响所有较低的子树样式
例如
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类，这些元素不应该"反转";
.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>在这个例子中，通过两次使用同一个类(一次在父类中，另一次在不需要重新定义的子类中，我们得到了这种重置效果)。同样，
对于非常简单的用例可能很方便。我不认为这是解决你问题的一般办法。