Right-to-left

Right-to-left languages such as Arabic, Persian, or Hebrew are supported. To change the direction of Material UI components you must follow the following steps.

Steps

1. HTML

Make sure the dir attribute is set on the html tag, otherwise native components will break:

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span> <span class="token attr-name">dir</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>rtl<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">></span></span>

If you need to change the direction of the text at runtime, but React does not control the root HTML element, you may use the JS API:

document<span class="token punctuation">.</span>dir <span class="token operator">=</span> <span class="token string">'rtl'</span><span class="token punctuation">;</span>

As an alternative to the above, you can also wrap your application (or part of it) in an element with the dir attribute. This, however, will not work correctly with portaled elements, such as Dialogs, as they will render outside of the element with the dir attribute.

To fix the portaled components, add an explicit dir attribute to them:

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Dialog</span></span> <span class="token attr-name">dir</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>rtl<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">MyComponent</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Dialog</span></span><span class="token punctuation">></span></span>

2. Theme

Set the direction in your custom theme:

<span class="token keyword">import</span> <span class="token punctuation">{</span> createTheme <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mui/material/styles'</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> theme <span class="token operator">=</span> <span class="token function">createTheme</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token literal-property property">direction</span><span class="token operator">:</span> <span class="token string">'rtl'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

3. Install the rtl plugin

When using either emotion or styled-components, you need stylis-plugin-rtl to flip the styles.

<span class="token function">npm</span> <span class="token function">install</span> stylis stylis-plugin-rtl

In case you are using jss (up to v4) or with the legacy @mui/styles package, you need jss-rtl to flip the styles.

<span class="token function">npm</span> <span class="token function">install</span> jss-rtl

Having installed the plugin in your project, Material UI components still require it to be loaded by the style engine instance that you use. Find bellow guides on how you can load it.

4. Load the rtl plugin

4.1 Emotion

If you use Emotion as your style engine, you should create a new cache instance that uses the stylis-plugin-rtl (the default prefixer plugin must also be included in order to retain vendor prefixing) and provide that on the top of your application tree. The CacheProvider component enables this:

<span class="token keyword">import</span> rtlPlugin <span class="token keyword">from</span> <span class="token string">'stylis-plugin-rtl'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> CacheProvider <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@emotion/react'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> createCache <span class="token keyword">from</span> <span class="token string">'@emotion/cache'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> prefixer <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'stylis'</span><span class="token punctuation">;</span>

<span class="token comment">// Create rtl cache</span>
<span class="token keyword">const</span> cacheRtl <span class="token operator">=</span> <span class="token function">createCache</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">'muirtl'</span><span class="token punctuation">,</span>
  <span class="token literal-property property">stylisPlugins</span><span class="token operator">:</span> <span class="token punctuation">[</span>prefixer<span class="token punctuation">,</span> rtlPlugin<span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token keyword">function</span> <span class="token constant">RTL</span><span class="token punctuation">(</span><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">CacheProvider</span></span> <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>cacheRtl<span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token punctuation">{</span>props<span class="token punctuation">.</span>children<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">CacheProvider</span></span><span class="token punctuation">></span></span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

4.2 styled-components

If you use styled-components as your style engine, you can use the StyleSheetManager and provide the stylis-plugin-rtl as an item in the stylisPlugins property:

<span class="token keyword">import</span> <span class="token punctuation">{</span> StyleSheetManager <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'styled-components'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> rtlPlugin <span class="token keyword">from</span> <span class="token string">'stylis-plugin-rtl'</span><span class="token punctuation">;</span>

<span class="token keyword">function</span> <span class="token constant">RTL</span><span class="token punctuation">(</span><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token punctuation">(</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">StyleSheetManager</span></span> <span class="token attr-name">stylisPlugins</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span>rtlPlugin<span class="token punctuation">]</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
      <span class="token punctuation">{</span>props<span class="token punctuation">.</span>children<span class="token punctuation">}</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">StyleSheetManager</span></span><span class="token punctuation">></span></span>
  <span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

4.3 JSS

After installing the plugin in your project, you need to configure the JSS instance to load it. The next step is to make the new JSS instance available to all the components in the component tree. The StylesProvider component enables this:

<span class="token keyword">import</span> <span class="token punctuation">{</span> create <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'jss'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> rtl <span class="token keyword">from</span> <span class="token string">'jss-rtl'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> StylesProvider<span class="token punctuation">,</span> jssPreset <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mui/styles'</span><span class="token punctuation">;</span>

<span class="token comment">// Configure JSS</span>
<span class="token keyword">const</span> jss <span class="token operator">=</span> <span class="token function">create</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token operator">...</span><span class="token function">jssPreset</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>plugins<span class="token punctuation">,</span> <span class="token function">rtl</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token keyword">function</span> <span class="token constant">RTL</span><span class="token punctuation">(</span><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">StylesProvider</span></span> <span class="token attr-name">jss</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>jss<span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token punctuation">{</span>props<span class="token punctuation">.</span>children<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">StylesProvider</span></span><span class="token punctuation">></span></span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

For more information on the plugin, head to the plugin README. Note: Internally, withStyles is using this JSS plugin when direction: 'rtl' is set on the theme.

Demo

Use the direction toggle button on the top right corner to flip the whole documentation

Name

<CacheProvider value={cacheRtl}>
  <ThemeProvider theme={theme}>
    <div dir="rtl">
      <TextField label="Name" variant="standard" />
      <input type="text" placeholder="Name" />
    </div>
  </ThemeProvider>
</CacheProvider>

<CacheProvider value={cacheRtl}>
  <ThemeProvider theme={theme}>
    <div dir="rtl">
      <TextField label="Name" variant="standard" />
      <input type="text" placeholder="Name" />
    </div>
  </ThemeProvider>
</CacheProvider>

Press Enter to start editing

Opting out of rtl transformation

Emotion & styled-components

You have to use the template literal syntax and add the /* @noflip */ directive before the rule or property for which you want to disable right-to-left styles.

<span class="token keyword">const</span> AffectedText <span class="token operator">=</span> <span class="token function">styled</span><span class="token punctuation">(</span><span class="token string">'div'</span><span class="token punctuation">)</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">
  text-align: left;
</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>

<span class="token keyword">const</span> UnaffectedText <span class="token operator">=</span> <span class="token function">styled</span><span class="token punctuation">(</span><span class="token string">'div'</span><span class="token punctuation">)</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">
  /* @noflip */
  text-align: left;
</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>

RTL

Affected

Unaffected

JSS

If you want to prevent a specific rule-set from being affected by the rtl transformation you can add flip: false at the beginning.

<span class="token keyword">const</span> useStyles <span class="token operator">=</span> <span class="token function">makeStyles</span><span class="token punctuation">(</span>
  <span class="token punctuation">(</span><span class="token parameter">theme</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span><span class="token punctuation">{</span>
    <span class="token literal-property property">affected</span><span class="token operator">:</span> <span class="token punctuation">{</span>
      <span class="token literal-property property">textAlign</span><span class="token operator">:</span> <span class="token string">'right'</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token literal-property property">unaffected</span><span class="token operator">:</span> <span class="token punctuation">{</span>
      <span class="token literal-property property">flip</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
      <span class="token literal-property property">textAlign</span><span class="token operator">:</span> <span class="token string">'right'</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
  <span class="token punctuation">{</span> defaultTheme <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>