[TypeStyle] Reusable styles using TypeStyle mixins
TypeStyle’s style function allows you to give multiple objects as an argument. This provides a simple extensible reuse-ability model. We cover typestyle mixin and mixin creators in this lesson. We also demonstrate that you have the full power of JavaScript at your disposal when using TypeStyle.
import { style } from 'typestyle'; import * as React from 'react'; import * as ReactDOM from 'react-dom'; const fontSize = (value: number | string) => { const valueStr = typeof value === 'string' ? value : value + 'px'; return { fontSize: valueStr } }; const className = style( fontSize('3em'), {color: 'red'} ); ReactDOM.render( <div className={className}> Hello Typestyle </div>, document.getElementById('root') );