This is smaller that usual.
;
},
};
// alternate syntax using the decorator
import { styles } from 'react-statics-styles';
@styles({
'.MyComponent .MyComponent-item': {
fontSize: 0.8 * readFontSizeFromConfig() + 'px',
}
})
class MyComponent extends React.Component { ... }
```
Then pass one or more class definition(s) to `extractStyles(class)` or `extractAllStyles(array of class)`:
```js
import { extractStyles, extractAllStyles } from 'react-statics-styles';
extractStyles(MyComponent); // returns a CSS string
extractAllStyles([MyComponent1, MyComponent2, ...]);
```
Assuming that `readFontSizeFromConfig()` returns `10`, then the first line returns the string:
```css
/* @react-nexus-style MyComponent */
.MyComponent .MyComponent-item {
font-size: 8px;
}
```
The decorator form supports passing additional options.
The only currently supported option is `prefix`, a static string which will be preprended to all the generated selectors.
```js
@styles({
'.ES6ClassDecoratorWithPrefix': {
minWidth: '334px',
},
}, { prefix: '.MyApp '})
class ES6ClassDecoratorWithPrefix extends React.Component {
static displayName = 'ES6ClassDecoratorWithPrefix';
render() {
return