Skip to content
Permalink
master
Switch branches/tags
Go to file
 
 
Cannot retrieve contributors at this time

Enables functions for dynamic styles

If you want dynamic behavior for your Style Sheet, you can use functions as a value which returns the actual value or a rule. If function returns null|undefined|false - property will be removed. Use sheet.update(data) in order to pass the data object.

Sheet option link: true is required for this to function.

Plugins are applied by default to function rules or values.

Function values

const styles = {
  button: {
    color: data => data.color
  }
}
.button-0 {
  color: red;
}

Function rules

Similar to function values, you can use a function to return a dynamic style object. Use sheet.update(data) in order to pass the data object. Sheet option link: true is required for this to function.

const styles = {
  button: data => ({
    display: 'flex',
    color: data.color
  })
}

Function values inside function rules are not supported.

Support of "!important"

To use the !important modifier with function values, you must use array syntax:

const styles = {
  button: {
    color: data => [[data.color], '!important']
  }
}

Updating

import jss from 'jss'

// Note that `link` option is required.
const sheet = jss
  .createStyleSheet(
    {
      /* styles */
    },
    {link: true}
  )
  .attach()

sheet.update({color: 'red'})

Demo

CodeSandbox