File tree Expand file tree Collapse file tree
Expand file tree Collapse file tree Original file line number Diff line number Diff line change @@ -35,34 +35,71 @@ yarn add react-style-stringify
3535
3636## Usage
3737
38- Here’s a basic example of how to use the package:
38+ ### Import utils
3939
4040``` tsx
4141import {
4242 stringifyCSSProperties ,
4343 stringifyStyleMap ,
4444} from " react-style-stringify" ;
45+ ```
46+
47+ ### Convert a single ` CSSProperties ` object
4548
46- // Convert a single CSSProperties object
49+ ``` tsx
4750const cssString = stringifyCSSProperties ({
4851 flex: 1 ,
4952 padding: 20 ,
5053 backgroundColor: " teal" ,
5154});
5255// Output: "flex:1; padding:20px; background-color:teal;"
56+ ```
57+
58+ ** Inject ` !important ` into CSS string**
59+
60+ ``` tsx
61+ const importantCssString = stringifyCSSProperties (
62+ {
63+ flex: 1 ,
64+ padding: 20 ,
65+ backgroundColor: " teal" ,
66+ },
67+ true
68+ );
69+ // Output: "flex:1!important; padding:20px!important; background-color:teal!important;"
70+ ```
71+
72+ ### Convert a ` Record<string, CSSProperties> ` object
5373
54- // Convert a Record<string, CSSProperties> object
74+ ``` tsx
5575const cssMapString = stringifyStyleMap ({
56- div : {
57- color: " blue " ,
58- marginBottom: 20 ,
76+ p : {
77+ margin: 0 ,
78+ color: " teal " ,
5979 },
60- " .my-class " : {
80+ " #root ul .my-list > li " : {
6181 padding: 10 ,
62- fontSize: 14 ,
6382 },
6483});
65- // Output: "div{color:blue; margin-bottom:20px;} .my-class{padding:10px; font-size:14px;}"
84+ // Output: "p{margin:0; color:teal;} #root ul.my-list > li{padding:10px;}"
85+ ```
86+
87+ ** Inject ` !important ` into CSS string**
88+
89+ ``` tsx
90+ const importantCssMapString = stringifyStyleMap (
91+ {
92+ p: {
93+ margin: 0 ,
94+ color: " teal" ,
95+ },
96+ " #root ul.my-list > li" : {
97+ padding: 10 ,
98+ },
99+ },
100+ true
101+ );
102+ // Output: "p{margin:0!important; color:teal!important;} #root ul.my-list > li{padding:10px!important;}"
66103```
67104
68105## API
You can’t perform that action at this time.
0 commit comments