Right-to-left

Right-to-left languages such as Arabic, Persian, or Hebrew are supported. To change the direction of MUI 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:

<html dir="rtl"></html>

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.dir = 'rtl';

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:

<Dialog dir="rtl">
  <MyComponent />
</Dialog>

2. Theme

Set the direction in your custom theme:

import { createTheme } from '@mui/material/styles';

const theme = createTheme({
  direction: 'rtl',
});

3. Install the rtl plugin

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

npm install 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.

npm install jss-rtl

Having installed the plugin in your project, MUI 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:

import rtlPlugin from 'stylis-plugin-rtl';
import { CacheProvider } from '@emotion/react';
import createCache from '@emotion/cache';
import { prefixer } from 'stylis';

// Create rtl cache
const cacheRtl = createCache({
  key: 'muirtl',
  stylisPlugins: [prefixer, rtlPlugin],
});

function RTL(props) {
  return <CacheProvider value={cacheRtl}>{props.children}</CacheProvider>;
}

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:

import { StyleSheetManager } from 'styled-components';
import rtlPlugin from 'stylis-plugin-rtl';

function RTL(props) {
  return (
    <StyleSheetManager stylisPlugins={[rtlPlugin]}>
      {props.children}
    </StyleSheetManager>
  );
}

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:

import { create } from 'jss';
import rtl from 'jss-rtl';
import { StylesProvider, jssPreset } from '@mui/styles';

// Configure JSS
const jss = create({
  plugins: [...jssPreset().plugins, rtl()],
});

function RTL(props) {
  return <StylesProvider jss={jss}>{props.children}</StylesProvider>;
}

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>

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.

const AffectedText = styled('div')`
  text-align: left;
`;

const UnaffectedText = styled('div')`
  /* @noflip */
  text-align: left;
`;

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.

const useStyles = makeStyles(
  (theme) => ({
    affected: {
      textAlign: 'right',
    },
    unaffected: {
      flip: false,
      textAlign: 'right',
    },
  }),
  { defaultTheme },
);