Я хочу использовать rtl для некоторых моих компонентов в Nextjs. Я также использую material-ui. К сожалению, когда я меняю направление в _documents.js , направление всех моих компонентов изменится. Направление материала-ui в createMuiTheme () вообще не влияет на направление.

Некоторые компоненты, такие как стрелки, не должны изменяться в зависимости от направления. что мне делать, чтобы уберечь их от изменения направления.

Пожалуйста, дайте мне руку, если можете.

1
phy.milad 16 Янв 2021 в 16:27

2 ответа

Лучший ответ

Хакерское предложение. Вероятно, это не лучший ответ, но он может быть удобен / приличен, если вам нужно просто «сбросить» положение 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, мы получаем эффект сброса).

Опять же, это может быть полезно для очень простых случаев использования. Я не буду предлагать это как общее решение вашей проблемы.

0
GBra 16 Янв 2021 в 14:30

Материал Ui createMuiTheme получить направление как вариант
Я также помню, что он учитывает направление тега body

Итак, как я знаю, для изменения направления какой-либо части вашего компонента у вас есть 3 способа.

  1. Параметр изменения направления в материале createMuiTheme

Это можно сделать, например, через компонент поставщика темы

  1. Используйте другой экземпляр поставщика темы материала вокруг ваших компонентов RTL Вложение тем

  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>

0
Amirhossein Ebrahimi 16 Янв 2021 в 14:34