Skip to content

Commit e1d114f

Browse files
authored
Enable syntax highlighting in the code block
1 parent 35d50dd commit e1d114f

File tree

1 file changed

+48
-44
lines changed

1 file changed

+48
-44
lines changed

README.md

+48-44
Original file line numberDiff line numberDiff line change
@@ -18,68 +18,72 @@ Install from npm:
1818

1919
Configure in `webpack.config.js`:
2020

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',
3029
}
31-
...
32-
}
33-
30+
]
31+
}
32+
...
33+
}
34+
```
3435
Now you can author React components in `Styles.react.css`:
36+
```css
37+
Label {
38+
color: red;
39+
}
3540

36-
Label {
37-
color: red;
38-
}
39-
40-
Label:hover {
41-
color: white;
42-
}
41+
Label:hover {
42+
color: white;
43+
}
44+
```
4345

4446
And consume them like regular React components:
47+
```js
48+
import {Label} from './styles.react.css'
4549

46-
import {Label} from './styles.react.css'
47-
48-
<Label /> // => <div className="<autogenerated classname>">...</div>
49-
50+
<Label /> // => <div className="<autogenerated classname>">...</div>
51+
```
5052
## Variants
5153

5254
You can define additional styling variants for your components:
55+
```css
56+
Label {
57+
color: red;
58+
}
5359

54-
Label {
55-
color: red;
56-
}
57-
58-
Label:emphasis {
59-
font-weight: bold;
60-
}
60+
Label:emphasis {
61+
font-weight: bold;
62+
}
63+
```
6164

6265
They are compiled as CSS classes which then can be controlled from JS via
6366
`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+
```
6770
## Prop variants
6871

6972
You can define variants which are based on some JavaScript expression against
7073
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+
```
8083
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+
```
8387

8488
## TODO
8589

0 commit comments

Comments
 (0)