Right-to-left
To change the direction of Material-UI components you must follow the following steps. UIs for languages that are read from right-to-left (RTL), such as Arabic and Hebrew, should be mirrored.
Steps
1. HTML
Make sure the dir attribute is set on the body, otherwise native components will break:
<body dir="rtl">2. Theme
Set the direction in your custom theme:
const theme = createMuiTheme({
direction: 'rtl',
});3. jss-rtl
You need this JSS plugin to flip the styles: jss-rtl.
npm install jss-rtlHaving 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.
The CSS-in-JS documentation explains a bit more about how this plugin works. 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.
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