Fork of stylis-plugin-rtl to fix the CSS layer issue, uses cssjanus under the hood to flip style orientations for RTL
npm install mui-plugin-rtlStylis RTL plugin based on CSSJanus
> NOTE! Use v1 of this plugin for styled-components v5, NOT v2 (v2 is for libraries that have upgraded to stylis v4, which s-c has not yet. At the moment only emotion 11 is updated.)
``shell`
yarn add mui-plugin-rtl@^1
`shell`
yarn add mui-plugin-rtl stylis
`javascript
import styled, { StyleSheetManager } from "styled-components";
import rtlPlugin from "mui-plugin-rtl";
const Box = styled.div
padding-left: 10px;;
function MakeItRTL() {
return (
);
}
`
#### NOTE: Preventing flipping
Because minification removes all comments from your CSS before it passes to , / @noflip / comment won't work.
You will have to either:
- add an exclamation mark at the beginning of the comment, like this /! @noflip /, to prevent it from being removedminify
- disable minification entirely by setting to false in .babelrc (see styled-components documentation).
This is a fork of stylis-plugin-rtl` for use with Material UI v5+