mui-plugin-rtl

Stylis 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.)

Installation

v1

1yarn add mui-plugin-rtl@^1

v2

1yarn add mui-plugin-rtl stylis

Usage with styled-components v5+

1import styled, { StyleSheetManager } from "styled-components";
2import rtlPlugin from "mui-plugin-rtl";
3
4const Box = styled.div`
5  padding-left: 10px;
6`;
7
8function MakeItRTL() {
9  return (
10    <StyleSheetManager stylisPlugins={[rtlPlugin]}>
11      <Box>My padding will be on the right!</Box>
12    </StyleSheetManager>
13  );
14}

NOTE: Preventing flipping

Because minification removes all comments from your CSS before it passes to <StyleSheetManager>, /* @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 removed
• disable minification entirely by setting minify to false in .babelrc (see styled-components documentation).

This is a fork of stylis-plugin-rtl for use with Material UI v5+