Make sure you read how to use plugins in general.
Demo - JSS ![Gitter](https://badges.gitter.im/Join Chat.svg)
const sheet = jss.createStyleSheet({
container: {
padding: 20,
'&:hover': {
background: 'blue'
},
// Add a global .clear class to the container.
'&.clear': {
clear: 'both'
},
// Reference a global .button scoped to the container.
'& .button': {
background: 'red'
},
// Use multiple container refs in one selector
'&.selected, &.active': {
border: '1px solid red'
}
}
})
.container-3775999496 {
padding: 20px;
}
.container-3775999496:hover {
background: blue;
}
.container-3775999496.clear {
clear: both;
}
.container-3775999496 .button {
background: red;
}
.container-3775999496.selected, .container-3775999496.active {
border: 1px solid red;
}
const sheet = jss.createStyleSheet({
container: {
// Reference the local rule "button".
'& $button': {
padding: '10px'
},
// Multiple local refs in one rule.
'&:hover $button, &:active $button': {
color: 'red',
},
'&:focus $button': {
color: 'blue'
}
},
button: {
color: 'grey'
}
})
.button-3940538223 {
color: grey;
}
.container-2645419599 .button-3940538223 {
padding: 10px;
}
.container-2645419599:hover .button-3940538223, .container-2645419599:active .button-3940538223 {
color: red;
}
.container-2645419599:focus .button-3940538223 {
color: blue;
}
const sheet = jss.createStyleSheet({
button: {
color: 'red',
'@media (min-width: 1024px)': {
width: 200
}
}
})
.button-2683044438 {
color: red;
}
@media (min-width: 1024px) {
.button-2683044438 {
width: 200px;
}
}
Deep nesting is not supported for multiple reasons:
- More than 2 levels of indentation lead to less readability from our experience.
- Components should never be big and so there should be no need for deep nesting.
- Even if they are big, deep nesting shouldn't be needed. Class names can be switched on nodes for different states.
If you can provide a real life example where you really need deep nesting - we would love to know it.
File a bug against cssinjs/jss prefixed with [jss-nested].
npm i
npm run test
MIT