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">
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-rtl
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/core/styles';
// Configure JSS
const jss = create({ plugins: [...jssPreset().plugins, rtl()] });
function RTL(props) {
return (
<StylesProvider jss={jss}>
{props.children}
</StylesProvider>
);
}
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" />
<input type="text" placeholder="Name" />
</div>
</ThemeProvider>
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 beginning.
Use the direction toggle button on the top right corner to see the effect.
<div className={classes.affected}>Affected</div>
<div className={classes.unaffected}>Unaffected</div>