Search code examples
reactjsmaterial-uinext.jsright-to-leftdirection

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

I want to use RTL for some of my components in Nextjs. I also use material-ui. Unfortunately when I change direction in _documents.js with <HTML dir="rtl">, the direction of all of my components will change. material-ui's direction in createMuiTheme() doesn't affect direction at all.

Some of the components (like arrows) must not change based on direction. What should I do in order to keep them safe from changing direction.

Solution

  • Material Ui createMuiTheme get direction as an option itself
    I also remember that it respect the direction of body tag

    So for changing the direction of some part of your component, you have 3 ways as I know.

    1. Change direction option in material createMuiTheme

    It could be handle via your theme provider component for example

    1. Use other instance of material Theme provider around your rtl components Theme nesting

    2. Put dir="rtl" on native DOM tags these will affect all lower subtree styles if you want e.g. flex-box direction and ...

    for example

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


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