nodejs 013:Prect 样式复用（multiple classes）例子-CSDN博客

Prect 简单示例

Prect 为使用相同的现代 API 的快速 3kB React 替代方案。代码形式与 React 基本相同。部分语法区别可见 prect-differences-to-react。以下是一个 Prect 简单示例。

Button目录Button.css：

.this {
    display: inline-block;
    padding: 3px 8px;
    margin-bottom: 0;
    font-size: 0.9rem;
    line-height: 1.4;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: default;
    background-image: none;
    border: 1px solid transparent;
    border-radius: var(--radius-size);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.06);
    -webkit-app-region: no-drag;
    cursor: pointer;
}

.this:focus {
    outline: none;
    box-shadow: none;
}

Button目录index.jsx：

import { h } from 'preact';
import styles from './Button.css'; // CSS Modules模块化,需要打包工具支持，比如webpack在style-loader配置

const Button = ({
    className,
    children,
    type = 'default',
    ...props
}) => (
    <button
        // CSS Modules模块化,需要打包工具支持，比如webpack在style-loader配置
        className={${styles.this} ${styles[type]} ${className ? className : ''}}
        {...props}
    >
        { children }
    </button>
);

export default Button;

src使用的例子index.jsx

import {
    h, Component, render } from 'preact';
import Button from '../Button';

class App