yarn add stylis-rtlcssnpm i stylis-rtlcssimport styled, { StyleSheetManager } from "styled-components";
import rtlcss from "stylis-rtlcss";
const StyledDiv = styled.div`
margin-left: 10px;
`;
class App extends Component {
render() {
return (
<StyleSheetManager stylisPlugins={[rtlcss]}>
<StyledDiv>Margin will be on RIGHT!</StyledDiv>
</StyleSheetManager>
);
}
}to avoid typing issues in StyleSheetManager while using Typescript, you should conditionally render props
import styled, { StyleSheetManager } from "styled-components";
import rtlcss from "stylis-rtlcss";
const StyledDiv = styled.div`
margin-left: 10px;
`;
class App extends Component {
render() {
const { language } = this.props;
return (
<StyleSheetManager {...(language === 'ar' ? { stylisPlugins: [rtlcss] } : {})}
<StyledDiv>Margin will be on RIGHT!</StyledDiv>
</StyleSheetManager>
)
}
}- you need to disable minification in babel plugin Reference, that is because of minification removes all comments from your CSS before it passes to
<StyleSheetManager>. So, in.babelrcfile, setminifytofalse
{
"plugins": [
[
"babel-plugin-styled-components",
{
"minify": false
}
]
]
}Then you can use control Directives as you want
Control directives are placed between declarations or statements (rules and at-rules). They can target a single node (self-closing) or a set of nodes (block-syntax).
import styled, { StyleSheetManager } from "styled-components";
import rtlcss from "stylis-rtlcss";
const StyledDiv = styled.div`
/*rtl:ignore*/
margin-left: 10px;
`;
class App extends Component {
render() {
return (
<StyleSheetManager stylisPlugins={[rtlcss]}>
<StyledDiv>Margin stills on LEFT!</StyledDiv>
</StyleSheetManager>
);
}
}| Directive Syntax | Description |
|---|---|
/*rtl:ignore*/ |
Ignores processing of the following node (self-closing) or nodes within scope (block-syntax). |
/*rtl:remove*/ |
Removes the following node (self-closing) or nodes within scope (block-syntax). |
Value directives are placed any where inside the declaration value. They target the containing declaration node.
import styled, { StyleSheetManager } from "styled-components";
import rtlcss from "stylis-rtlcss";
const StyledDiv = styled.div`
margin-left: 10px /*rtl:ignore*/;
`;
class App extends Component {
render() {
return (
<StyleSheetManager stylisPlugins={[rtlcss]}>
<StyledDiv>Margin stills on LEFT!</StyledDiv>
</StyleSheetManager>
);
}
}| Directive Syntax | Description | Example |
|---|---|---|
/*rtl:prepend:{value}*/ |
Ignores processing of this declaration. | transform:rotate(45deg) /*rtl:append:scaleX(-1)*/; |
/*rtl:{value}*/ |
Replaces the declaration value with {value}. | font-size:16px/*rtl:14px*/; |
Licensed under the MIT License