テーマ設定

さまざまなテーマから選択するか、独自のテーマを簡単に開発できます。

アーキテクチャ#

**注記**: 近いうちに、スタイル付きモードのテーマ設定アーキテクチャは、動的なアプローチのために、後方互換性を保ちつつ、SCSS変数の代わりにCSS変数を利用するように再設計される予定です。

PrimeReactはデザインに依存しないライブラリであるため、他のUIライブラリとは異なり、マテリアルやブートストラップなどの特定のスタイルを強制しません。これを達成するために、スタイル設定はコアとテーマの2つの部分に分けられました。コアはPrimeReact内にあり、配置などのコンポーネントの構造を実装しますが、テーマは色と間隔をもたらします。

Architecture

組み込みテーマ#

PrimeReactには、選択できるさまざまな無料テーマが付属しています。以下のリストは、npmディストリビューションで利用可能なすべてのテーマをインポートパスとともに示しています。ライブプレビューの場合は、トップバーの設定ツールを使用してテーマを切り替えます。 


primereact/resources/themes/bootstrap4-light-blue/theme.css
primereact/resources/themes/bootstrap4-light-purple/theme.css
primereact/resources/themes/bootstrap4-dark-blue/theme.css
primereact/resources/themes/bootstrap4-dark-purple/theme.css
primereact/resources/themes/md-light-indigo/theme.css
primereact/resources/themes/md-light-deeppurple/theme.css
primereact/resources/themes/md-dark-indigo/theme.css
primereact/resources/themes/md-dark-deeppurple/theme.css
primereact/resources/themes/mdc-light-indigo/theme.css
primereact/resources/themes/mdc-light-deeppurple/theme.css
primereact/resources/themes/mdc-dark-indigo/theme.css
primereact/resources/themes/mdc-dark-deeppurple/theme.css
primereact/resources/themes/tailwind-light/theme.css
primereact/resources/themes/fluent-light/theme.css
primereact/resources/themes/lara-light-blue/theme.css
primereact/resources/themes/lara-light-indigo/theme.css
primereact/resources/themes/lara-light-purple/theme.css
primereact/resources/themes/lara-light-teal/theme.css
primereact/resources/themes/lara-dark-blue/theme.css
primereact/resources/themes/lara-dark-indigo/theme.css
primereact/resources/themes/lara-dark-purple/theme.css
primereact/resources/themes/lara-dark-teal/theme.css
primereact/resources/themes/soho-light/theme.css
primereact/resources/themes/soho-dark/theme.css
primereact/resources/themes/viva-light/theme.css
primereact/resources/themes/viva-dark/theme.css
primereact/resources/themes/mira/theme.css
primereact/resources/themes/nano/theme.css
primereact/resources/themes/saga-blue/theme.css
primereact/resources/themes/saga-green/theme.css
primereact/resources/themes/saga-orange/theme.css
primereact/resources/themes/saga-purple/theme.css
primereact/resources/themes/vela-blue/theme.css
primereact/resources/themes/vela-green/theme.css
primereact/resources/themes/vela-orange/theme.css
primereact/resources/themes/vela-purple/theme.css
primereact/resources/themes/arya-blue/theme.css
primereact/resources/themes/arya-green/theme.css
primereact/resources/themes/arya-orange/theme.css
primereact/resources/themes/arya-purple/theme.css
         

テーマの切り替え#

以下のソリューションは機能しますが、改善の余地があります。今後のスタイリングAPIは、動的なテーマ切り替え機能を大幅に改善し、CSS変数と動的インポートの導入により前提条件を排除します。

テーマは、 *PrimeReactContext* の *changeTheme* 関数を使用して動的に変更できます。この機能を動作させるには、2つの前提条件があります。まず、PrimeReactの *resources/themes* フォルダからコピーすることで、テーマがプロジェクトの *public* フォルダに公開されている必要があります。2つ目は、リンク要素を介してtheme.cssにアクセスできるようにすることです。そのため、 *changeTheme* 関数の3番目のパラメータとしてリンクのIDを指定できます。 


import { PrimeReactContext } from 'primereact/api';

//Use in a component
const { changeTheme } = useContext(PrimeReactContext);

changeTheme(currentTheme: string, newTheme: string, linkElementId: string, callback: Function)
         

*index.html* に直接アクセスできる場合は、リンクをheadセクションに配置できます。


<link id="theme-link" rel="stylesheet" href="/themes/lara-light-blue/theme.css">
         

Next.js アプリケーションは、next/headコンポーネントまたはカスタムドキュメントを使用してリンク要素を設定できます .


<Head>
    <link id="theme-link" rel="stylesheet" href="/themes/lara-light-blue/theme.css">
</Head>
         

カスタムテーマ#

テーマは、githubにある *primereact-sass-theme* プロジェクトを使用してSASSで作成されます。このリポジトリには、コンポーネントのすべてのscssファイルと組み込みテーマの変数が含まれているため、既存のテーマをカスタマイズしたり、独自のテーマを作成したりできます。テーマで使用されているscss変数は、SASS APIドキュメントにあります。

独自のテーマを作成するには、2つの方法があります。最初のオプションは、コマンドラインsassでテーマをコンパイルすることで、最後の方法は、プロジェクト内にscssファイルを埋め込んで、ビルド環境にコンパイルを任せることです。いずれの場合も、生成されたテーマファイルをプロジェクトにインポートする必要があります。3つのオプションすべてを示すビデオチュートリアルを作成しました。

テーマSCSS

テーマscssは、primereact-sass-themeリポジトリでオープンソースとして入手できます。 *theme-base* フォルダにはコンポーネントのテーマ構造が含まれており、 *themes* フォルダにあるテーマはベースをインポートし、SCSS変数を定義します。 *themes* フォルダにはすべての組み込みテーマも含まれているため、コードをカスタマイズすることもできます。

独自のテーマを作成するには、PrimeReactバージョンに一致するリリースをダウンロードし、 *themes/mytheme* フォルダにアクセスします。カスタマイズするsass変数は、 *variables* フォルダにあります。 *_fonts* ファイルを使用してプロジェクトのカスタムフォントを定義できますが、オプションの *_extensions* ファイルはコンポーネントのデザインにオーバーライドを追加するために提供されています。 *theme.scss* ファイルは、ルートにある *theme-base* フォルダとともにテーマファイルをインポートして、すべてをまとめて結合します。次のステップは、コマンドラインまたはプロジェクト内で行うことができるscssのコンパイルです。

SCSSを手動でコンパイルする

テーマの準備ができたら、次のコマンドを実行してコンパイルします。sass コマンドがターミナルで使用できる必要があります。


sass --update themes/mytheme/theme.scss:themes/mytheme/theme.css
         

次に、theme.cssファイルをコピーしてアプリケーションにインポートします.たとえば、Next.jsでは、 *\_app.js* が理想的な場所です.


import './assets/theme.css';
         

ビルド時のコンパイル

このアプローチでは、SCSSをコンパイルする機能を持つビルド環境に委任することで、手動コンパイルを排除します。 *theme-base* フォルダと *themes/mytheme* フォルダを、アセットが存在するアプリケーションにコピーします。 *\_app.js* や *index.js* などの適切なエントリポイントで、 *assets/themes/mytheme* から *theme.scss* をインポートします.これで、ビルド時にプロジェクトがsassをコンパイルしてテーマをインポートします.テーマへの変更はすぐに反映されます.

スコープ付きスタイリング#

デザイナーテーマはライブラリにグローバルスキンを適用します.特定のコンポーネントのスタイルを変更する必要がある場合は、名前付きクラス、CSSモジュール、またはstyled-jsxなどのCSS-in-JSソリューションを使用できます.以下の選択肢について説明するビデオチュートリアルがあります.

名前付きクラス#

名前付きクラスはコンポーネントの *className* プロパティにバインドされ、CSSはインポートで含まれます.CSSはまだグローバルにバンドルされているため、アプリケーションにCSSスコープを行うための組み込みソリューションがない場合は、このアプローチをお勧めします.

名前付きクラス名

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


/* .custompanel.css */
.mypanel .p-panel-header {
    background-color: #07c4e8;
    color: #ffffff;
}
         

import React from 'react';
import { Panel } from 'primereact/panel';
import './custompanel.css';

export default function PanelDemo() {
    return (
        <Panel header="Named ClassName" className="mypanel">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
                cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </Panel>
    )
}
         

CSSモジュール#

CSSモジュールを使用すると、CSSファイルをReactコンポーネントにインポートし、変数を使用して内部のクラスを参照できます。残念ながら、CSSモジュールは外部コンポーネントに適用されるカスケードクラスをサポートしていませんが、PrimeReactが新しいプロパティを介してコンポーネントの内部を公開するまでは、属性セレクターを一般的な回避策として使用できます。NextJSにはCSSモジュールの組み込みサポートがあり、.module.cssサフィックスが付いたCSSファイルはモジュールとして解釈されます。

CSSモジュール

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


/* paneldemo.module.css */
.mypanel > [class~="p-panel-header"] {
    background-color: #07c4e8;
    color: #ffffff;
}
         

import React from 'react';
import { Panel } from 'primereact/panel';
import panelDemoModule from './paneldemo.module.css';

export default function PanelDemo() {
    return (
        <Panel header="CSS Module" className={stylesModule.mypanel}>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
                cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </Panel>
    )
}
         

CSS in JS#

CSS-in-JSソリューションは、スコープ付きCSSを実装するためにもよく使用されます。例として、styled-jsxを使用してパネルをカスタマイズします。:globalの使用はスタイリングをグローバルにすることはなく、メインコンテナ要素（この場合は.p-panel）をスコープするのに十分であるため、内部要素からの名前空間のみを削除することに注意してください。

スタイル付きコンポーネント

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


import React from 'react';
import { Panel } from 'primereact/panel';
import css from 'styled-jsx/css';

export default function PanelDemo() {
    const {className, styles} = css.resolve`
        .p-panel > :global(.p-panel-header) {
            background-color: #54b5a6;
            color: #ffffff;
        }
    `;

    return (
        <>
            <style jsx>{styles}</style>
            <Panel header="CSS Module" className={className}>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
                cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </Panel>
        </>
    )
}
         

スケール#

PrimeReactは、コンポーネントがUIの他の部分と完全に調和するように、rem単位を使用します。これにより、スケーリングも可能になります。たとえば、コンポーネントのサイズを変更するには、ドキュメントのフォントサイズを設定するだけで簡単です。以下のコードは、コンポーネントのスケールを16pxに基づいて設定します。より大きくまたはより小さなコンポーネントが必要な場合は、この変数を変更するだけで、コンポーネントはそれに応じてスケールされます。


html {
    font-size: 14px;
}
         

PrimeFlex#

PrimeFlexは、Prime UIライブラリと静的Webページにも付属する軽量のレスポンシブCSSユーティリティライブラリです。PrimeReactは、bootstrapやtailwindのようなCSSユーティリティライブラリで使用できますが、PrimeFlexには、CSS変数を使用してPrimeReactテーマと統合できるという利点があります。たとえば、bg-blue-500などのカラークラスは、使用されているPrimeReactテーマからカラーコードを受け取ります。PrimeReactはPrimeFlexのCSSユーティリティアプローチに従っており、現在、sxのような拡張スタイルプロパティは提供していません。PrimeBlocks for PrimeReactプロジェクトでも同じアプローチが利用されています。

大きな画面では3つのボタンを水平に配置し、小さな画面ではスタックして表示する方法を示す例を次に示します。


<div className="flex flex-column md:flex-row justify-content-between my-5">
    <Button type="button" label="Button 1" className="mb-3 md:mb-0"></Button>
    <Button type="button" label="Button 2" className="p-button-secondary mb-3 md:mb-0"></Button>
    <Button type="button" label="Button 3" className="p-button-help"></Button>
</div>
         

ユーティリティ#

PrimeFlexに加えて、PrimeReactには独自のCSSユーティリティクラスもいくつかあります。

名前説明
p-componentfont-familyやfont-sizeなどのコンポーネントテーマを要素に適用します。
p-fluidすべての子孫コンポーネントに100％の幅を適用します。
p-disabled無効として表示するために不透明度を適用します。
p-sr-only要素は視覚的に非表示になりますが、アクセシビリティは引き続き利用できます。
p-resetブラウザのデフォルトをリセットします。
p-linkボタンをリンクとしてレンダリングします。
p-errorエラーテキストを示します。
p-invalid無効なスタイルをテキストまたはフォームフィールドに適用します。
p-text-secondary2番目の優先度でテーマのテキストの色を適用します。

CSS変数#

各PrimeReactテーマは多数のCSS変数をエクスポートします。詳細については、色ページを参照してください。

                        PrimeReact 10.8.3 by PrimeTek