There is a category of css properties named 'inheritable'. It means that these properties apply to the child nodes from parent nodes. See this article for more details.
Due to this reason styles in reusable UI components can be broken if all inheritable properties were not defined explicitly for each element. It can cost You extra efforts to build strong isolation in a component.
This plugin protects styles from inheritance. It automatically creates a reset rule and applies it to every user's rule.
Make sure you read how to use plugins in general.
![Gitter](https://badges.gitter.im/Join Chat.svg)
import jss from 'jss'
import jssIsolate from 'jss-isolate'
jss.use(jssIsolate())
const sheet = jss.createStyleSheet({
// All atRules will be ignored in reset.
'@font-face': {
'font-family': 'MyHelvetica',
src: 'local("Helvetica")',
},
title: {
'font-size': '20px',
background: '#f00',
},
link: {
'font-size': '12px',
},
article: {
margin: '20px 10px 30px',
isolate: false // This rule will be ignored in reset.
}
})
There are 2 ways to avoid isolation if you want to.
- For a rule
export default {
button: {
isolate: false
}
}
- For a style sheet
jss.createStyleSheet(styles, {isolate: false})
If you want to pass additional properties that need to be resetted.
jss.use(jssIsolate({
reset: {
boxSizing: 'border-box'
}
}))
A full list of currently resetted properties is here.
npm i
npm run test
MIT