JSS plugin that enables mixing in styles.
npm install jss-extend
This plugin implements a custom property extend which allows you to mix in styles in various ways.
Style object own properties always take precedence over extended objects, so you can always override the extended definition. Exception is function values.
javascriptconst buttonColor = {
color: 'green'
}
const buttonTheme = {
extend: buttonColor
background: 'red'
}
const styles = {
button: {
extend: buttonTheme,
fontSize: '20px'
}
}
`Use rule name from the current styles object
javascript
const styles = {
buttonColor: {
background: 'red'
},
button: {
extend: 'buttonColor',
fontSize: '20px'
}
}
`Use array of style objects
javascript
const styles = {
button: {
extend: [{background: 'red'}, {color: 'green'}],
fontSize: '20px'
}
}
`javascriptconst background = {background: 'red'}
const color = {color: 'green'}
const styles = {
button: {
extend: [background, color],
fontSize: '20px'
}
}
`Use function which returns a style object
Nested
inside of the function is not supported. Will override other properties defined in the same rule.`javascript
const styles = {
button: {
extend: (data) => ({
color: data.theme.color
}),
fontSize: '20px'
}
}
`Demo
Issues
File a bug against [cssinjs/jss prefixed with \[jss-extend\]](https://github.com/cssinjs/jss/issues/new?title=[jss-extend]%20).
Run tests
bash
npm i
npm run test
``MIT