jss-css
This is a convenience module for JSS that converts CSS string into JSS object. It allows to describe style classes for components in a habitual and little less verbose way.
Installation
npm i -S jss-css
Examples
import css from 'jss-css/lib/css';
import useSheet from 'react-jss';
@useSheet(css`
.cell {
padding: 1rem;
}
.separator ~ .separator {
border-left: 1px solid #DDD;
}
`)
class Cell extends Component {
...
}
or:
import useSheet from 'jss-css/lib/useSheet';
@useSheet(`
.cell {
padding: 1rem;
}
.separator ~ .separator {
border-left: 1px solid #DDD;
}
`)
class Cell extends Component {
...
}
These css declarations will be converted into JSS object:
{
'cell': {
'padding': '1rem'
},
'separator': {
'& ~ &': {
'border-left': '1px solid #DDD'
}
}
}
(for the nested styles to work you'll need to use jss-nested plugin)
Also, if you are using Babel, you can use this Babel Plugin to avoid runtime compilation (/* jss-css */
comment is neccessary):
import useSheet from 'jss-css/lib/useSheet';
@useSheet(`
/* jss-css */
.cell {
padding: 1rem;
}
.separator ~ .separator {
border-left: 1px solid #DDD;
}
`)
class Cell extends Component {
...
}
Note: in this case, you cannot use variables in the template string (at least for now).