Permalink
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
67 lines (50 sloc) 1.66 KB

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
  })
}

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'})