CSSレイヤー

CSSレイヤーはスタイル付きモードでのみ使用されます。アンスタイルモードでは、組み込みのCSSクラスは含まれておらず、その結果、レイヤーは定義されません。このドキュメントはスタイル付きモードのみに適用されます。

@layerは、優先順位のカスタマイズ可能な順序を定義するための標準的なCSS機能です。レイヤーについて詳しく知りたい場合は、まずMDNのドキュメントをご覧ください。スタイル付きモードでは、PrimeReactはライブラリのスタイルを簡単に上書きできるように、組み込みのスタイルクラスをprimereactカスケードレイヤーでラップします。レイヤーのないアプリのCSSは、CSSの特異性が最も高いため、場所やクラスの記述方法に関係なく、スタイルを上書きできます。

たとえば、使用中のテーマで定義されているInputSwitchコンポーネントの丸みを帯びたボーダーを削除する必要があるとします。これを実現するには、.p-inputswitch .p-inputswitch-sliderセレクターを上書きする必要があります。レイヤーがない場合、より強力なCSSを書いたり、!importantを使用する必要がありますが、レイヤーを使用すると、my-switch-sliderなどのより簡単なクラス名でPrimeReactを常に上書きできるため、問題は発生しません。このアプローチのもう1つの利点は、コンポーネントの組み込みクラス名を把握する必要がないことです。

import React, { useState } from 'react';
import { InputSwitch } from 'primereact/inputswitch';

export function SpecificityDemo() {
    const [checked, setChecked] = useState(false);
    const css = `
        .my-switch-slider {
            border-radius: 0;
        }

        .my-switch-slider:before {
            border-radius: 0;
        }
    `;

    return (
        <div className="card">
            <InputSwitch
                checked={checked}
                onChange={(e) => setChecked(e.value)}
                pt={{
                    slider: {
                        className: 'my-switch-slider'
                    }
                }}
            />
            <style>{css}</style>
        </div>
    );
}
 

レイヤーを使用すると、CSSモジュールを使用することもできます。例については、CSSモジュールガイドをご覧ください。

入力やボタンなどのHTML要素に対するグローバルスタイルがあり、それらがPrimeReactでも使用されている場合、カスタマイズの容易さが問題になる可能性があります。これは、より広い範囲を持つグローバルスタイル（例：button）とレイヤーがないと、常にPrimeReactコンポーネントを上書きして予期しない結果につながるためです。標準のHTML要素に適用されるグローバルスタイルの一般的なユースケースは、ブラウザのデフォルトのスタイルを削除するためのCSSリセットユーティリティです。この場合、ベストプラクティスは、resetのようなレイヤーでCSSをラップし、primereactをそのレイヤーの後に配置することです。レイヤーは後方に定義されたものが優先されるためです。これにより、リセットCSSがPrimeReactコンポーネントの邪魔になりません。

/* Order */
@layer reset, primereact;

/* Reset CSS */
@layer reset {
    button,
    input {
        /* CSS to Reset */
    }
}
 

PrimeReactとCSSライブラリの互換性。

Tailwind CSSには、baseと呼ばれるpreflightというリセットユーティリティが含まれています。この機能を使用する場合は、baseとユーティリティを別のレイヤーでラップし、primereactレイヤーをbaseの後に配置してください。

@layer tailwind-base, primereact, tailwind-utilities;

@layer tailwind-base {
    @tailwind base;
}

@layer tailwind-utilities {
    @tailwind components;
    @tailwind utilities;
}
 

Bootstrapには、標準要素のCSSをリセットするrebootユーティリティがあります。このユーティリティを含める場合は、インポート時にレイヤーを指定できます。

@layer bootstrap-reboot, primereact;

@import "bootstrap-reboot.css" layer(bootstrap-rebooot);
 

Normalizeは、標準要素のCSSをリセットする別のユーティリティです。CSSファイルのインポート時に、レイヤーを割り当て、normalizedレイヤーの後にprimereactを配置してレイヤーの順序を定義します。

@layer normalize, primereact;

@import "normalize.css" layer(normalize-reset);