はじめに

このセクションでは、EffCSSをインストールしてページに接続します。

次に、シンプルなスタイルシート作成関数を作成し、それを適用します。

インストール

ターミナルに以下を入力してください：

# npm
npm i effcss

# pnpm
pnpm add effcss

# yarn
yarn add effcss

接続

EffCSSを使用するには、スタイルプロバイダーを取得する必要があります。useStyleProvider関数を呼び出すだけです。

import { useStyleProvider } from 'effcss';

const provider = useStyleProvider({
    // you can pass custom settings here
});

スタイルプロバイダーは設定可能です。該当するセクションで、利用可能なすべての設定と属性を確認してください。

使用方法

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はutilites引数を使うことで、スタイルシート作成を簡略化できます。詳細は次のセクションをご覧ください。

はじめに ​

インストール ​

接続 ​

使用方法 ​

はじめに

インストール

接続

使用方法