@@ -99,32 +99,53 @@ class ComponentName extends React.Component {
99
99
// ComponentName.displayName = 'ComponentName';
100
100
```
101
101
102
+ Please, note also that if you are using a functional stateless component, you have to wrap it with our function to make it work.
103
+ This function accepts the component as parameter of the first function and its name as parameter of its return:
104
+
105
+ ``` js
106
+ import ReactCSSOM from ' react-cssom' ;
107
+
108
+ const Foo = ReactCSSOM .inject ((props ) => (
109
+ < div>
110
+ Hello {props .name }
111
+ < / div>
112
+ ))(' Foo' );
113
+ ```
114
+
102
115
103
116
### Adapting based on props
104
117
105
- If you want to set styles based on props, you can do it in 2 ways:
118
+ If you want to set styles based on props, you can do it in 3 ways:
106
119
107
- - Set inline styles, as we can see in this example :
120
+ - Using a style tag directly into the component :
108
121
``` js
109
- class Button extends React .Component {
122
+ export default class Button extends React .Component {
110
123
111
124
static displayName = ' Button' ;
112
125
113
126
render () {
114
127
return (
115
- < button
116
- style= {{
117
- backgroundColor: this .props .primary ? ' blue' : ' black' ,
118
- }}
119
- >
120
- Click me
121
- < / button>
128
+ < div>
129
+ < style>
130
+ {`
131
+ .⚛Button > button {
132
+ background-color: ${ this .props .primary ? ' blue' : ' black' }
133
+ }
134
+ ` }
135
+ < / style>
136
+ < button
137
+ className= {this .props .primary ? styles .primary : styles .default }
138
+ >
139
+ Click me
140
+ < / button>
141
+ < / div>
122
142
)
123
143
}
124
144
}
125
145
```
126
146
127
- - Set a specific class, maybe using css-modules, as we can see here:
147
+
148
+ - Setting a specific class, maybe using css-modules, as we can see here:
128
149
``` js
129
150
import styles from ' ./Button.css' ;
130
151
@@ -169,6 +190,26 @@ and here is the corresponding css, note the global selector:
169
190
}
170
191
```
171
192
193
+ - Setting inline styles, as we can see in this example:
194
+ ``` js
195
+ class Button extends React .Component {
196
+
197
+ static displayName = ' Button' ;
198
+
199
+ render () {
200
+ return (
201
+ < button
202
+ style= {{
203
+ backgroundColor: this .props .primary ? ' blue' : ' black' ,
204
+ }}
205
+ >
206
+ Click me
207
+ < / button>
208
+ )
209
+ }
210
+ }
211
+ ```
212
+
172
213
## Change Log
173
214
174
215
This project adheres to [ Semantic Versioning] ( http://semver.org/ ) .
0 commit comments