[TypeStyle] Add responsive styles using TypeStyle Media Queries

Posted 2020-09-21 Answer1215

Media queries are very important for designs that you want to work on both mobile and desktop browsers. TypeStyle gives media queries special attention, making it easy to write them using CSS in JS.

In this lesson we show TypeStyle‘s media function. We also demonstrate how you can add non standard media queries if you want. Finally we show how organizing media queries this way is encapsulated under CSS class names.

 

import { style, media } 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(
    {color: ‘red‘, transition: ‘font-size 0.2s‘},
    media({maxWidth: 700, minWidth: 500}, fontSize(20)),
    media({minWidth: 701}, fontSize(30)),
    media({maxWidth: 499}, fontSize(15))
);

ReactDOM.render(
    <div className={className}>
        Hello Typestyle
    </div>,
    document.getElementById(‘root‘)
);