Skip to content

Commit 300ba1f

Browse files
committed
styles property works with ES6 classes and stateless function components.
1 parent 59f148c commit 300ba1f

File tree

1 file changed

+10
-6
lines changed

1 file changed

+10
-6
lines changed

README.md

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ React CSS Modules implement automatic mapping of CSS modules. Every CSS class is
1717
- [webpack](#webpack)
1818
- [Browserify](#browserify)
1919
- [Extending Component Styles](#extending-component-styles)
20-
- [Inheriting the Styles Object Through Properties](#inheriting-the-styles-object-through-properties)
20+
- [Styles Property](#styles-property)
2121
- [Decorator](#decorator)
2222
- [Options](#options)
2323
- [`allowMultiple`](#allowmultiple)
@@ -219,9 +219,13 @@ In this example, `table-custom-styles.css` selectively extends `table.css` (the
219219

220220
Refer to the [`UsingStylesProperty` example](https://github.com/gajus/react-css-modules-examples/tree/master/src/UsingStylesProperty) for an example of a working implementation.
221221

222-
### Inheriting the Styles Object Through Properties
222+
### Styles Property
223223

224-
`styleNames` cannot be used within a component to define styles of a `ReactElement` that will be generated by another component, e.g.
224+
Decorated components inherit `styles` property that describes the mapping between CSS modules and CSS classes.
225+
226+
`styles` property within the component itself is designed to be used only when `styleNames` cannot be used.
227+
228+
`styleNames` cannot be used within a component to define styles of a `ReactElement` that will be generated by another component (https://github.com/gajus/react-css-modules/issues/11), e.g.
225229

226230
```js
227231
class extends React.Component {
@@ -237,9 +241,7 @@ class extends React.Component {
237241
}
238242
```
239243

240-
The original [issue](https://github.com/gajus/react-css-modules/issues/11) describing the use case.
241-
242-
For that purpose, the decorated class inherits `styles` property that you can use just as a regular CSS Modules object. The earlier example can be therefore rewritten to:
244+
For that purpose, the decorated component inherits `styles` property that you can use just as a regular CSS Modules object. The earlier example can be therefore rewritten to:
243245

244246
```js
245247
class extends React.Component {
@@ -255,6 +257,8 @@ class extends React.Component {
255257
}
256258
```
257259

260+
`styles` property works with ES6 classes and stateless function components.
261+
258262
### Decorator
259263

260264
```js

0 commit comments

Comments
 (0)