• [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')
    );
  • 相关阅读:
    Android app 简单的电话拨号器
    JavaWEB开发中的/到底代表什么
    springmvc json
    ForeignKey.on_delete
    django 实现指定文件合并成压缩文件下载
    常用SQL的优化
    数据库 两个简单实用的表级优化方法
    一天只能触发一次操作
    Ajax 生成流文件下载 以及复选框的实现
    django Q和F查询
  • 原文地址:https://www.cnblogs.com/Answer1215/p/6951531.html
Copyright © 2020-2023  润新知