Styles

You can set styles as in HTML, or provide style objects:

1link<div style='color: #f5b461; transform: rotate(15deg)'>Hellow World!</div>

1link<div style={{

2link  color: '#f5b461',

3link  transform: {

4link    rotate: '15deg',

5link  }

6link}}>Hellow World!</div>

👉 You can put the unit in the css key:

1link<div style={{

2link  color: '#f5b461',

3link  transform: {

4link    'rotate.deg': 15,

5link  }

6link}}>Hellow World!</div>

👉 You can use nested objects for transform and transition css keys.

linkDyanmic Styles

You can provide callbags in the style object for dynamic styling:

1linkconst timer = interval(1000);

2linkconst color = expr($ => $(timer) % 2 ? '#f5b461' : '#21aba5');

3link

4linkrenderer.render(

5link  <div style={{

6link    color: color,

7link    transition: {

8link      color: '.5s',

9link    },

10link    transform: {

11link      'rotate.deg': 15,

12link    }

13link  }}>Hellow World!</div>

14link).on(document.body);

linkDynamic Transform / Transition

If you want to pass nested objects for transform/transition with callbags as values, use expr() to create a callbag returning the transform/transition object:

1linkconst timer = interval(1000);

2link

3linkrenderer.render(

4link  <div style={{

5link    color: '#f5b461',

6link    transition: 'transform .9s',

7link    transform: expr($ => ({

8link      'rotate.deg': $(timer) * 45

9link    }))

10link  }}>Hellow World!</div>

11link).on(document.body);