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 body, otherwise native components will break:

<body dir="rtl"></body>

As an alternative to the above, you can also wrap your application in an element with the dir attribute:

function App() {
  return (
    <div dir="rtl">
      <MyComponent />
    </div>
  );
}

This can be helpful for creating components to toggle language settings in the live application.

2. Theme

Set the direction in your custom theme:

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

3. Install the rtl plugin

In case you are using jss (up to v4), you need this JSS plugin to flip the styles: jss-rtl.

npm install jss-rtl

If you are using emotion or styled-components, you need this stylis plugin to flip the styles: stylis-plugin-rtl.

npm install stylis-plugin-rtl

Note: Only emotion is compatible with version 2 of the plugin. styled-components requires version 1. If you are using styled-components as styled engine, make sure to install the correct version.

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 JSS

Having installed the plugin in your project, Material-UI components still require it to be loaded by the jss instance, as described below. Internally, withStyles is using this JSS plugin when direction: 'rtl' is set on the theme. Head to the plugin README to learn more about it.

Once you have created a new JSS instance with the plugin, you need to make it 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 '@material-ui/styles';

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

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

4.2 emotion

If you use emotion as your style engine, you should create new cache instance that uses the stylis-plugin-rtl 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';

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

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

4.3 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>
  );
}

Demo

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

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

Opting out of rtl transformation

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.

Use the direction toggle button on the top right corner to see the effect.

Affected

Unaffected

<div className={classes.affected}>Affected</div>
<div className={classes.unaffected}>Unaffected</div>

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.

Use the direction toggle button on the top right corner to see the effect.

Affected

Unaffected

<ThemeProvider theme={theme}>
  <Root>
    <AffectedText>Affected</AffectedText>
    <UnaffectedText>Unaffected</UnaffectedText>
  </Root>
</ThemeProvider>