• [TypeStyle] Compose CSS classes using TypeStyle


    We will demonstrate composing classes using the utility classes function. classes is also what we recommend for theming. Using pure CSS classes means that the component consumers are free to customize the component using any technology (not just TypeStyle). classes is also what is recommended for conditionally applied TypeStyle CSS class names.

    import { style, classes } 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 baseClassName = style(
        {
            color: 'green',
        },
        fontSize(15)
    );
    const errorClassName = style({
            color: 'red'
        },
        fontSize(12)
    );
    
    
    const Section = ({children, hasError, className}: {
        children?: any, hasError?: boolean, className?: string
    }) => (
        <div className={classes(
            baseClassName,
            className,
            hasError && errorClassName
        )}>
            {children}
        </div>
    );
    
    const App = () => (
        <div>
            <Section className={style({backgroundColor: 'pink'})}>Success</Section>
            <Section className={style({backgroundColor: 'yellow'})} hasError={true}>Error</Section>
        </div>
    
    );
    
    ReactDOM.render(
        <App />,
        document.getElementById('root')
    );
  • 相关阅读:
    猫树
    单位根反演
    区间修改区间求和
    最远点 决策单调性
    圆方树
    912. 排序数组
    1309. 解码字母到整数映射
    28. 实现 strStr()
    31. 下一个排列
    22. 括号生成
  • 原文地址:https://www.cnblogs.com/Answer1215/p/6951531.html
Copyright © 2020-2023  润新知