File tree 1 file changed +48
-44
lines changed
1 file changed +48
-44
lines changed Original file line number Diff line number Diff line change @@ -18,68 +18,72 @@ Install from npm:
18
18
19
19
Configure in ` webpack.config.js ` :
20
20
21
- module.exports = {
22
- ...
23
- module: {
24
- loaders: [
25
- {
26
- test: /\.react.css$/,
27
- loader: 'babel-loader!react-css-components/webpack',
28
- }
29
- ]
21
+ ``` js
22
+ module .exports = {
23
+ ...
24
+ module: {
25
+ loaders: [
26
+ {
27
+ test: / \. react. css$ / ,
28
+ loader: ' babel-loader!react-css-components/webpack' ,
30
29
}
31
- ...
32
- }
33
-
30
+ ]
31
+ }
32
+ ...
33
+ }
34
+ ```
34
35
Now you can author React components in ` Styles.react.css ` :
36
+ ``` css
37
+ Label {
38
+ color : red ;
39
+ }
35
40
36
- Label {
37
- color: red;
38
- }
39
-
40
- Label:hover {
41
- color: white;
42
- }
41
+ Label :hover {
42
+ color : white ;
43
+ }
44
+ ```
43
45
44
46
And consume them like regular React components:
47
+ ``` js
48
+ import {Label } from ' ./styles.react.css'
45
49
46
- import {Label} from './styles.react.css'
47
-
48
- <Label /> // => <div className="<autogenerated classname>">...</div>
49
-
50
+ < Label / > // => <div className="<autogenerated classname>">...</div>
51
+ ```
50
52
## Variants
51
53
52
54
You can define additional styling variants for your components:
55
+ ``` css
56
+ Label {
57
+ color : red ;
58
+ }
53
59
54
- Label {
55
- color: red;
56
- }
57
-
58
- Label:emphasis {
59
- font-weight: bold;
60
- }
60
+ Label :emphasis {
61
+ font-weight : bold ;
62
+ }
63
+ ```
61
64
62
65
They are compiled as CSS classes which then can be controlled from JS via
63
66
` variant ` prop:
64
-
65
- <Label variant={{emphasis: true}} /> // sets both classes with `color` and `font-weight`
66
-
67
+ ``` js
68
+ < Label variant= {{emphasis: true }} / > // sets both classes with `color` and `font-weight`
69
+ ```
67
70
## Prop variants
68
71
69
72
You can define variants which are based on some JavaScript expression against
70
73
props:
71
-
72
- Label {
73
- color: red;
74
- }
75
-
76
- Label:prop(mode == "emphasis") {
77
- font-weight: bold;
78
- }
79
-
74
+ ``` css
75
+ Label {
76
+ color : red ;
77
+ }
78
+
79
+ Label :prop(mode == "emphasis") {
80
+ font-weight : bold ;
81
+ }
82
+ ```
80
83
They are compiled as CSS classes which then can be controlled from JS:
81
-
82
- <Label mode="emphasis" /> // sets both classes with `color` and `font-weight`
84
+ ``` js
85
+ < Label mode= " emphasis" / > // sets both classes with `color` and `font-weight`
86
+ ```
83
87
84
88
## TODO
85
89
You can’t perform that action at this time.
0 commit comments