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
+11-11Lines changed: 11 additions & 11 deletions
Original file line number
Diff line number
Diff line change
@@ -6,29 +6,29 @@ Easy theming and composition for CSS Modules.
6
6
$ npm install --save react-css-themr
7
7
```
8
8
9
-
**Note: Feedback and contributions on the docs are highly appreciated. Please open issues for comments of reach me.**
9
+
**Note: Feedback and contributions on the docs are highly appreciated.**
10
10
11
11
## Why?
12
12
13
13
When you use [CSS Modules](https://github.com/css-modules/css-modules) to style your components, a classnames object is usually imported from the same component. Since css classes are scoped by default, there is no easy way to make your component customizable for the outside world.
14
14
15
15
## The approach
16
16
17
-
Taking ideas from [future-react-ui](https://github.com/nikgraf/future-react-ui) and [react-themeable](https://github.com/markdalgleish/react-themeable), a component should be shipped without styles. This means we can consider the styles as an injectable dependency. In CSS Modules you can consider the imported classnames object as a theme for a component. Therefore, every styled component should define a classname API to be used in the rendering function.
17
+
Taking ideas from [future-react-ui](https://github.com/nikgraf/future-react-ui) and [react-themeable](https://github.com/markdalgleish/react-themeable), a component should be shipped **without** styles. This means we can consider the styles as an **injectable dependency**. In CSS Modules you can consider the imported classnames object as a **theme** for a component. Therefore, every styled component should define a *classname API* to be used in the rendering function.
18
18
19
-
The most immediate way of providing a classname object is via props. In case you want to import a component with a theme already injected, you have to write a higher order component that does the job. This is ok for your own components, but for ui-kits like [React Toolbox](www.react-toolbox.com) or [Belle](http://http://nikgraf.github.io/belle/), you'd have to write a wrapper for every single component you want to use. In this fancy, you can understand the theme as a set of related classname objects for different components. It makes sense to group them together in a single object and move it through the component tree using a context. This way, you can provide a theme either via context, hoc or props.
19
+
The most immediate way of providing a classname object is via *props*. In case you want to import a component with a theme already injected, you have to write a higher order component that does the job. This is ok for your own components, but for ui-kits like [React Toolbox](www.react-toolbox.com) or [Belle](http://http://nikgraf.github.io/belle/), you'd have to write a wrapper for every single component you want to use. In this fancy, you can understand the theme as a **set** of related classname objects for different components. It makes sense to group them together in a single object and move it through the component tree using a context. This way, you can provide a theme either via **context**, **hoc** or **props**.
20
20
21
-
The approach of react-css-themr consists of a provider and a decorator. The provider sets a context theme. The decorator adds to your components the logic to figure out which theme should be used, depending on configuration, context and props.
21
+
The approach of react-css-themr consists of a *provider* and a *decorator*. The provider sets a context theme. The decorator adds to your components the logic to figure out which theme should be used or how should it be composed, depending on configuration, context and props.
22
22
23
23
## Combining CSS modules
24
24
25
-
There are three possible sources for your component. Sorted by priority: context, configuration and props. Any of them can be missing. In case multiple themes are present, you may want to compose the final classnames object in three different ways:
25
+
There are three possible sources for your component. Sorted by priority: **context**, **configuration** and **props**. Any of them can be missing. In case multiple themes are present, you may want to compose the final classnames object in three different ways:
26
26
27
-
- Override: the theme object with the highest priority is the one used.
28
-
- Softly merging: theme objects are merged but if a key is present in more than one object, the final value corresponds to the theme with highest priority.
29
-
- Deeply merging: theme objects are merged and if a key is present in more than one object, the values for each objects are concatenated.
27
+
-*Override*: the theme object with the highest priority is the one used.
28
+
-*Softly merging*: theme objects are merged but if a key is present in more than one object, the final value corresponds to the theme with highest priority.
29
+
-*Deeply merging*: theme objects are merged and if a key is present in more than one object, the values for each objects are concatenated.
30
30
31
-
You can choose whatever you want. We consider the last one as the most flexible so it's selected by default.
31
+
You can choose whatever you want. We consider the last one as the most flexible so it's selected *by default*.
32
32
33
33
## How does it work?
34
34
@@ -71,7 +71,7 @@ export default (props) => (
71
71
72
72
### Default theming
73
73
74
-
If you use a component with a base theme, you may to want import the component with the theme already injected. Then you can compose its style via props with another theme object. In this case the base css will always be bundled:
74
+
If you use a component with a base theme, you may to want import the component with the theme already injected. Then you can compose its style via props with another theme object. In this case the base css will **always** be bundled:
75
75
76
76
```jsx
77
77
// SuccessButton.js
@@ -120,7 +120,7 @@ The final classnames object for the `Button` component would include class value
120
120
121
121
### Context theming
122
122
123
-
Although context theming is not limited to ui-kits, it's very useful to avoid declaring hoc for every component. For example, in react-toolbox, you can define a context theme like:
123
+
Although context theming is not limited to ui-kits, it's very useful to avoid declaring hoc for every component. For example, in [react-toolbox](www.react-toolbox.com), you can define a context theme like:
0 commit comments