Share via

モダン テーマでコンポーネントのスタイルを設定する (プレビュー)

  • [アーティクル]

[このトピックはプレリリース ドキュメントであり、変更されることがあります。]

開発者は、コンポーネントが含まれるアプリケーションの残りの部分と同じように見えるように、コンポーネントのスタイルを設定できる必要があります。 これは、キャンバス アプリ (モダン コントロールとテーマ 機能による)、またはモデル駆動型アプリ (新しく刷新された外観 による) のいずれかのモダン テーマが有効になっている場合に実行できます。 Fluent UI React v9 に基づくモダン テーマを使用して、コンポーネントのスタイルを設定します。 コンポーネントで最高のパフォーマンスとテーマ体験を得るには、このアプローチをお勧めします。

コンポーネントにモダン テーマを適用するには 4 つの異なる方法があります。

Fluent UI v9 コントロール

Fluent UI v9 コントロールをコンポーネントとしてラップすることは、モダン テーマがこれらのコントロールに自動的に適用されるため、モダン テーマを利用する最も簡単な方法です。 唯一の前提条件は以下に示すように、コンポーネントに React のコントロールとプラットフォーム ライブラリ (プレビュー) への依存関係を確実に追加することです。 このアプローチにより、コンポーネントはプラットフォームと同じ React および Fluent ライブラリを使用できるため、テーマ トークンをコンポーネントに渡す同じ React コンテキストを共有できます。

<resources>
  <code path="index.ts" order="1"/>
  <!-- Dependency on React controls & platform libraries -->
  <platform-library name="React" version="16.8.6" />
  <platform-library name="Fluent" version="9.4.0" />
</resources>

Fluent UI v8 コントロール

Fluent は、コンポーネントで Fluent UI v8 コントロールを使用するときに、v9 テーマ構造を適用するための移行パスを提供します。 次の例に示すように、Fluent の v8 から v9 への移行パッケージ に含まれる createV8Theme 関数を使用して、v9 テーマ トークンに基づいて v8 テーマを作成します:

const theme = createV8Theme(
  context.fluentDesignLanguage.brand,
  context.fluentDesignLanguage.theme
);
return <ThemeProvider theme={theme}></ThemeProvider>;

Fluent UI 以外のコントロール

コンポーネントで Fluent UI を使用しない場合は、fluentDesignLanguage コンテキスト パラメーターで使用できる v9 テーマ トークンに直接依存することができます。 このパラメータを使用して、すべての テーマ トークンにアクセスし、テーマのあらゆる側面を参照して、それ自体をスタイル設定できるようにします。

<span style={{ fontSize: context.fluentDesignLanguage.theme.fontSizeBase300 }}>
  {"Stylizing HTML with platform provided theme."}
</span>

カスタム テーマ プロバイダー

コンポーネントにアプリの現在のテーマとは異なるスタイル設定が必要な場合は、独自の FluentProvider を作成し、コンポーネントで使用する独自のテーマ トークンのセットを渡します。

<FluentProvider theme={context.fluentDesignLanguage.tokenTheme}>
  {/* your control */}
</FluentProvider>

サンプル コントロール

これらの各ユースケースの例は、モダン テーマ API コントロール で入手できます。

よくあるご質問

このセクションには、よく寄せられる質問が含まれています。 この機能について質問がある場合は、このページの下部にある このページ への フィードバック ボタンを使用して、GitHub イシューを作成します。

Q: コントロールは Fluent UI v9 を使用しており、プラットフォーム ライブラリに依存していますが、モダン テーマを利用したくありません。 コンポーネントでこれを無効にするにはどうすればよいですか?

A: 次の 2 つの方法があります:

  1. 独自のコンポーネント レベル FluentProvider を作成できます

    <FluentProvider theme={customFluentV9Theme}>
  {/* your control */}
</FluentProvider>

  2. コントロールを IdPrefixContext.Provider 内にラップし、独自の idPrefix 値を設定できます。 これにより、コンポーネントがプラットフォームからテーマ トークンを取得できなくなります。

    <IdPrefixProvider value="custom-control-prefix">
  <Label weight="semibold">This label is not getting Modern Theming</Label>
</IdPrefixProvider>

Q: Fluent UI v9 コントロールの一部がスタイルを取得できません

A: React Portal に依存する Fluent v9 コントロールは、スタイルが適切に適用されるようにテーマ プロバイダーで再ラップする必要があります。 FluentProvider を使用することができます。

Q: モダン テーマが有効になっているかどうかを確認するにはどうすればよいですか

A: トークンが利用可能かどうかを確認できます: context.fluentDesignLanguage?.tokenTheme。 または、モデル駆動型アプリケーションでは、アプリの設定を確認できます: context.appSettings.getIsFluentThemingEnabled()。

テーマ (Power Apps component framework API リファレンス)
モダン テーマ API コントロール
キャンバス アプリで最新のテーマを使用する (プレビュー)

注意

ドキュメントの言語設定についてお聞かせください。 簡単な調査を行います。 (この調査は英語です)

この調査には約 7 分かかります。 個人データは収集されません (プライバシー ステートメント)。