入门

在本节中，我们将安装 EffCSS 并将其连接到您的页面。 然后，我们将编写一个简单的样式表生成器函数并应用它。

安装

在终端中输入：

# npm
npm i effcss

# pnpm
pnpm add effcss

# yarn
yarn add effcss

连接

要使用 EffCSS，您需要获取一个 Style provider。只需调用 useStyleProvider 函数即可：

import { useStyleProvider } from 'effcss';

const provider = useStyleProvider({
    // 您可以在此处传递自定义设置。
});

可以配置“样式提供程序”。请在相应部分查看所有可用设置和属性。.

使用

CSS 样式表可以通过 StyleSheet maker 函数创建。它只是一个返回包含样式的对象或字符串的函数：

import { TStyleSheetMaker } from 'effcss';

export const maker: TStyleSheetMaker = () => {
    const flexColumn = {
        display: 'flex',
        flexDirection: 'column',
    };
    return {
        html: {
            fontSize: '16px',
        },
        '.card': {
            width: '10rem',
            ...flexColumn,
            '.card__header': {
                height: '2rem',
            },
            '.card__body': flexColumn,
            ':hover': {
                borderRadius: '1rem',
            },
        },
    };
};

请注意，CSS属性名称可以采用“驼峰式命名法”。

然后使用提供程序通过以下方式将此样式表添加到页面：

import { useStyleProvider } from 'effcss';
import { maker } from './maker';

const provider = useStyleProvider();
provider.use(maker);

恭喜！您的样式已应用到页面。很简单，对吧？

实际上，EffCSS 可以通过实用程序参数简化样式表的编写。详情请参见以下部分。