提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

[TypeStyle] Compose CSS classes using TypeStyle

CSS Using Compose classes
2023-09-14 08:59:18 时间

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')
);

 

相关文章