[TypeStyle] Style CSS pseudo-classes using TypeStyle with $nest

最新推荐文章于 2024-09-03 08:51:48 发布

转载最新推荐文章于 2024-09-03 08:51:48 发布 · 98 阅读

本文介绍如何使用TypeStyle库来实现类似于CSS伪类（如:focus、:hover、:active）的效果，通过React和TypeStyle结合的方式展示了字体大小变化及背景颜色切换等样式调整。

TypeStyle is a very thin layer on top of CSS. In this lesson we show how to change styles based on pseudo classes e.g. :focus :hover and :active which matches very closely with what you would write with raw CSS.

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',
        $nest: {
            '&:focus': {backgroundColor: 'green'},
            '&:hover': fontSize(50),
            /** iphone */
            '@media screen and (-webkit-min-device-pixel-ratio: 2)': {
                backgroundColor: 'blue'
            }
        }
    },
    media({maxWidth: 700, minWidth: 500}, fontSize(20)),
    media({minWidth: 701}, fontSize(30)),
    media({maxWidth: 499}, fontSize(15))
);

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