[TypeStyle] Reusable styles using TypeStyle mixins

Posted 2020-09-21 Answer1215

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‘)
);