You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+7-7Lines changed: 7 additions & 7 deletions
Original file line number
Diff line number
Diff line change
@@ -7,7 +7,7 @@ Seamless CSS modules for React.
7
7
8
8
## What's the Problem?
9
9
10
-
[CSS modules](https://github.com/css-modules/css-modules) are awesome. If you are not familiar with CSS modules, it is a concept of using a module bundler such as webpack to load CSS scoped to a particular document. CSS modules loader will generate a unique name for a each CSS class at the time of loading the CSS. Refer to [webpack-demo](https://css-modules.github.io/webpack-demo/) for a full example.
10
+
[CSS modules](https://github.com/css-modules/css-modules) are awesome. If you are not familiar with CSS modules, it is a concept of using a module bundler such as [webpack](http://webpack.github.io/docs/) to load CSS scoped to a particular document. CSS modules loader will generate a unique name for a each CSS class at the time of loading the CSS. Refer to [webpack-demo](https://css-modules.github.io/webpack-demo/) for a full example.
11
11
12
12
In the context of React, this looks like this:
13
13
@@ -27,10 +27,10 @@ export default class Car extends React.Component {
27
27
28
28
Awesome!
29
29
30
-
However, there are a several disadvantages of this approach:
30
+
However, this approach has several disadvantages:
31
31
32
32
* You have to use `camelCael` CSS class names.
33
-
* You have to use `styles` object whenever assigning a class.
33
+
* You have to use `styles` object whenever constructing a `className`.
34
34
35
35
React CSS Modules enables seamless CSS modules for React, e.g.
36
36
@@ -51,6 +51,10 @@ class Car extends React.Component {
51
51
exportdefaultCSSModules(Car, styles);
52
52
```
53
53
54
+
`CSSModules` extends `Car``render` method. It will look for CSS classes in `./car.css` that match CSS class names in `ReactElement``className` and will replace/append the matching unique class names to `className` declaration.
55
+
56
+
Refer to the [react-css-modules-examples](https://github.com/gajus/react-css-modules-examples) repository for a complete usage example.
`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.
98
-
99
-
Refer to the [react-css-modules-examples](https://github.com/gajus/react-css-modules-examples) repository for a complete usage example.
100
-
101
101
## Multiple CSS Classes
102
102
103
103
CSS modules promote composition pattern, i.e. every CSS class should define all properties required to describe the element, e.g.
0 commit comments