zoukankan      html  css  js  c++  java
  • [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')
    );
  • 相关阅读:
    js面试题-----算法类
    js面试题-----安全类
    js面试题-----通信类
    js面试题-----面向对象类
    js面试题-----HTTP协议类
    js面试题-----CSS盒模型
    Java-JVM 类的初始化
    加密的相关基础
    AngularJS-directive.js 基本指令
    AngularJS-liveRoomDirective.js 直播间指令
  • 原文地址:https://www.cnblogs.com/Answer1215/p/6951531.html
Copyright © 2011-2022 走看看