Skip to content

Commit dd5ae20

Browse files
committed
Docs
1 parent 03ad027 commit dd5ae20

File tree

1 file changed

+45
-1
lines changed

1 file changed

+45
-1
lines changed

README.md

Lines changed: 45 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,4 +28,48 @@ export default CSSModules(Car, styles);
2828

2929
Thats it!
3030

31-
CSSModules extends `Car` `render` method. It will look for CSS classes in `./car.css` that match `ReactElement` `className` and will append the matching unique class names to `className` declaration.
31+
`CSSModules` extends `Car` `render` method. It will look for CSS classes in `./car.css` that match `ReactElement` `className` and will append the matching unique class names to `className` declaration.
32+
33+
Refer to the [react-css-modules-examples](https://github.com/gajus/react-css-modules-examples) repository for a complete usage example.
34+
35+
## Multiple CSS Classes
36+
37+
CSS modules promote composition pattern, i.e. every CSS class should define all properties required to describe the element, e.g.
38+
39+
```css
40+
.button {
41+
42+
}
43+
44+
.active {
45+
composes: common;
46+
47+
/* anything that only applies to active state of the button */
48+
}
49+
50+
.disabled {
51+
composes: common;
52+
53+
/* anything that only applies to disabled state of the button */
54+
}
55+
```
56+
57+
To learn more about composing CSS rules, I suggest reading Glen Maddern article about [CSS Modules](http://glenmaddern.com/articles/css-modules) and the official [CSS modules spec](https://github.com/css-modules/css-modules).
58+
59+
However, using React CSS Modules, you can map as many CSS classes to the element as you want. `CSSModules` will append the unique class name for every class name it matches in the `className` declaration, e.g.
60+
61+
```css
62+
.button {
63+
64+
}
65+
66+
.active {
67+
68+
}
69+
```
70+
71+
```js
72+
<div className='button active'></div>
73+
```
74+
75+
This will work as you'd expect.

0 commit comments

Comments
 (0)