Skip to content

Commit 987ea4d

Browse files
committed
Docs
1 parent 3ff2d94 commit 987ea4d

File tree

1 file changed

+19
-0
lines changed

1 file changed

+19
-0
lines changed

README.md

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,25 @@
77

88
First you need to setup [webpack](http://webpack.github.io/docs/) to load your css files using "css" loader and enable CSS modules. You will also need to use `extract-text-webpack-plugin` to construct the CSS file. Refer to [webpack-demo](https://github.com/css-modules/webpack-demo).
99

10+
Then you need use the higher order component declaration pattern to encapsulate your component:
11+
1012
```js
13+
import React from 'react';
14+
import styles from './car.css';
15+
import CSSModules from 'react-css-modules';
16+
17+
class Car extends React.Component {
18+
render () {
19+
return <div className='car'>
20+
<div className='front-door'></div>
21+
<div className='back-door'></div>
22+
</div>;
23+
}
24+
}
1125

26+
export default CSSModules(Car, styles);
1227
```
28+
29+
Thats it!
30+
31+
CSSModules component will look for CSS classes in `./car.css` that match `ReactElement` `className` and will extend the `className` declaration at the time of `render`.

0 commit comments

Comments
 (0)