お気に入りのCSSライブラリでPrimeReactをスタイリングする。
スタイルなしモードは2つのソリューションで構成されています。最初の部分は、コンポーネント固有のスタイルクラスをDOMから削除することです。unstyled設定が有効になっている場合、コンポーネントはCSSセレクターを含まず、コア機能は引き続き利用可能です。たとえば、デフォルトのスタイル付きモードでは、ドロップダウンコンポーネントはルート要素に.p-dropdownスタイルクラスを追加し、対応するスタイルにCSSを含めます。スタイルなし設定では、このスタイルクラスはルート要素に追加されず、CSSはページに含まれません。
2番目の部分は、コンポーネントがスタイルなしで透明に表示されるため、カスタムスタイリングです。パススループロパティ機能は、スタイルなしモードでテーマを作成するためのグローバル構成もサポートしているため、重要です。実際、今後のTailwindテーマは、基本的にカスタムpt構成です。
スタイルなしモードは、PrimeReactのインストール中にunstyledをtrueに設定することで、スイート全体で有効になります。
import { PrimeReactProvider } from "primereact/api";
...
return(
<PrimeReactProvider value={{ unstyled: true }}>
<App />
</PrimeReactProvider>
)
あるいは、デフォルトのスタイル付きモードでも、コンポーネントのunstyledプロパティを追加することで、特定のコンポーネントをスタイルなしとして使用できます。
<Button label="Check" icon="pi pi-check" unstyled></Button>
ここに、PrimeFlex CSSライブラリを使用してスタイルを提供するサンプルがあります。始める前に、コンポーネントの内部構造について詳しく学ぶために、パススルーセクションのボタンのドキュメントに進んでください。カスタムスタイルを追加するために、root、label、icon要素を使用します。
<Button label="Submit" icon="pi pi-check" unstyled
pt={{
root: { className: 'bg-teal-500 hover:bg-teal-700 cursor-pointer text-white p-3 border-round border-none flex gap-2' },
label: { className: 'text-white font-bold text-xl' },
icon: 'text-white text-2xl' // OR { className: 'text-white text-2xl' }
}}
/>
スタイルなしテーマは、基本的にグローバルなpt構成であるため、単一の場所から1回だけ定義できますが、コンポーネントのptプロパティとグローバル設定はコンポーネントが優先されるため、特定のコンポーネントはグローバル構成をオーバーライドできます。
import { PrimeReactProvider } from "primereact/api";
...
return(
<PrimeReactProvider
value={{
pt: {
button: {
root: { className: 'bg-teal-500 hover:bg-teal-700 cursor-pointer text-white p-3 border-round border-none flex gap-2' },
label: 'text-white font-bold text-xl', // OR { className: 'text-white font-bold text-xl' }
icon: 'text-white text-2xl'
},
panel: {
header: 'bg-primary border-primary',
content: 'border-primary text-lg text-primary-700',
title: 'bg-primary text-xl',
toggler: 'bg-primary hover:bg-primary-reverse'
}
}
}}
>
<App />
</PrimeReactProvider>
);