|
6 | 6 |
|
7 | 7 | ## Making class-based themed components |
8 | 8 |
|
9 | | -Make a component themeable with the [withStyle](#withStyle) decorator. It adds a `makeStyles` function and the generated `styles` object to the decorated Component's props. |
| 9 | +Make a component themeable with the [withStyle](withStyle) decorator. It adds a `makeStyles` function and the generated `styles` object to the decorated Component's props. |
10 | 10 |
|
11 | 11 | Import the style generator (`generateStyle`) from `styles.js` and the component theme generator (`generateComponentTheme`) from `theme.js`, and pass them to the decorator. |
12 | 12 |
|
@@ -80,14 +80,14 @@ const generateComponentTheme = (theme) => { |
80 | 80 | export default generateComponentTheme |
81 | 81 | ``` |
82 | 82 |
|
83 | | -The arguments to the generator function are the [global theme variables](#canvas). In the above example, we've defined the default theme for the Button component. |
| 83 | +The arguments to the generator function are the [global theme variables](canvas). In the above example, we've defined the default theme for the Button component. |
84 | 84 |
|
85 | 85 | The purpose of the generator function is to take the global variables and apply them as values to the functional component level variables. |
86 | 86 | When coming up with names for the component level variables, try to make them describe how they are used in the component (vs describing the variable value). |
87 | 87 |
|
88 | 88 | ### Supporting multiple themes |
89 | 89 |
|
90 | | -If we want to make the Button transform the global theme variables differently with another theme, (e.g. [canvas-high-contrast](#canvas-high-contrast)) we can make specific styling for that theme: |
| 90 | +If we want to make the Button transform the global theme variables differently with another theme, (e.g. [canvas-high-contrast](canvas-high-contrast)) we can make specific styling for that theme: |
91 | 91 |
|
92 | 92 | ```js |
93 | 93 | --- |
@@ -127,7 +127,7 @@ The rest of the variables will pick up from the default Button theme generator ( |
127 | 127 |
|
128 | 128 | In the `styles.js` file, the `generateStyle` method receives the theme variable object (`componentTheme`) generated by `theme.js`. |
129 | 129 |
|
130 | | -Add your styling for each element in the component, and give them [labels](https://emotion.sh/docs/labels#gatsby-focus-wrapper) for easy readability and targetability. _Naming convention_: similar to [BEM naming convention](#http://getbem.com/naming/), use the name of the component in camelCase for the root element ('button'), and the double underscore suffix for children ('button\_\_icon'). |
| 130 | +Add your styling for each element in the component, and give them [labels](https://emotion.sh/docs/labels#gatsby-focus-wrapper) for easy readability and targetability. _Naming convention_: similar to [BEM naming convention](http://getbem.com/naming/), use the name of the component in camelCase for the root element ('button'), and the double underscore suffix for children ('button\_\_icon'). |
131 | 131 |
|
132 | 132 | Use [Emotion's Object Styles documentation](https://emotion.sh/docs/object-styles) as a guide to add styles. |
133 | 133 |
|
|
0 commit comments