css-render-decorator.md

@css() .render() Decorator Interface

Render method decorator is very much similar to @css() class decorator, with one very big difference that the style template specified in the .render() method decorator will get re-rendered on every component re-render.

As such, render method decorator always expects a function as its argument. As a rule of thumb, put your "static" styles into the class decorator and only styles that will change over time — in your render method decorator; for best performance.

Usage

Import @css decorator.

import css from 'freestyler/lib/react/css';

Add styling to your component using a function that returns a CSS-like object.

class App extends Component {
  @css(({props, state}) => ({
    bd: '1px solid ' + (props.color || 'tomato'),
    '& > button': {
      bg: 'red',
      bdrad: '5px',
      col: '#fff',
    }
  }))
  render () {
    return (
      <div>
        <button className='button' />
      </div>
    );
  }
}