Right-to-left

To change the direction of Material-UI components you must follow the following steps.

Steps

1. HTML

Make sure dir="rtl" is set on body, otherwise native components and portals will break.

2. Theme

Set direction: 'rtl' on your custom theme.

3. jss-rtl

We are relying on a JSS plugin to flip the styles: jss-rtl.

npm install jss-rtl

Internally, we are dynamically enabling this plugin when direction: 'rtl' is set on the theme. The CSS-in-JS documentation explains a bit more how this plugin is working. Head to the plugin README to know everything about it.

Once you have created a new JSS instance with the plugin, you need to make it available to all components in the component tree. JSS has a JssProvider component for this:

import { create } from 'jss';
import rtl from 'jss-rtl';
import JssProvider from 'react-jss/lib/JssProvider';
import { createGenerateClassName, jssPreset } from '@material-ui/core/styles';

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

// Custom Material-UI class name generator.
const generateClassName = createGenerateClassName();

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

Demo

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

Opting out of rtl transformation

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

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