A plugin for Material UI that provides RTL (right-to-left) support.
npm install @mui/stylis-plugin-rtlStylis RTL plugin for Material UI.
> Note: this is a fork of stylis-plugin-rtl to fix issues with CSS layers and to support the latest version of Stylis.
``bash`
npm install @mui/stylis-plugin-rtl @emotion/cache stylis
`js
import * as React from 'react';
import { createTheme, ThemeProvider } from '@mui/material/styles';
import TextField from '@mui/material/TextField';
import rtlPlugin from '@mui/stylis-plugin-rtl';
import { prefixer } from 'stylis';
import { CacheProvider } from '@emotion/react';
import createCache from '@emotion/cache';
const theme = createTheme({
direction: 'rtl',
});
const cacheRtl = createCache({
key: 'muirtl',
stylisPlugins: [prefixer, rtlPlugin],
});
export default function RtlDemo() {
return (
placeholder="العنصر النائب"
helperText="هذا نص مساعد"
variant="outlined"
/>
);
}
``
For more information, see the RTL documentation.