セクションの背景のサポート

SharePoint Framework v1.8 以降、Web パーツはセクションの背景を認識し、これらの色を使用して、異なる背景を持つセクションでホストされている場合の Web パーツの外観を向上させることができます。

別の背景を使用するようにセクションを構成する

設定できるセクションの背景色は、適用したテーマのメインの色に基づいています。 セクションの背景を設定するには、そのプロパティを開きます。

プロパティでは、設定するセクション背景の種類を定義できます。

Web パーツのテーマを認識させる

マニフェストを更新する

Web パーツの supportsThemeVariants マニフェストにプロパティを追加し、その値を に設定する true必要があります。

{
  // ...

  "supportsThemeVariants": true,

  "version": "*",
  "manifestVersion": 2,

  "requiresCustomScript": false,

  "preconfiguredEntries": [{
    // ...
  }]
}

React以外の Web パーツで背景色の認識を使用する

Web パーツにテーマの変更を認識させるには、テーマの変更が行われた場合にイベントを発生させるサービスのサポート ThemeProvider を実装する必要があります。

import {
  ThemeProvider,
  ThemeChangedEventArgs,
  IReadonlyTheme,
  ISemanticColors
} from '@microsoft/sp-component-base';

...

private _themeProvider: ThemeProvider;
private _themeVariant: IReadonlyTheme | undefined;

protected onInit(): Promise<void> {
  // Consume the new ThemeProvider service
  this._themeProvider = this.context.serviceScope.consume(ThemeProvider.serviceKey);

  // If it exists, get the theme variant
  this._themeVariant = this._themeProvider.tryGetTheme();

  // Register a handler to be notified if the theme variant changes
  this._themeProvider.themeChangedEvent.add(this, this._handleThemeChangedEvent);

  return super.onInit();
}

/**
 * Update the current theme variant reference and re-render.
 *
 * @param args The new theme
 */
private _handleThemeChangedEvent(args: ThemeChangedEventArgs): void {
  this._themeVariant = args.theme;
  this.render();
}

を ThemeProvider 使用して、正しい本文テキストの色を取得できるようになりました。

public render(): void {
  const semanticColors: Readonly<ISemanticColors> | undefined = this._themeVariant && this._themeVariant.semanticColors;

  const style: string = ` style="background-color:${semanticColors.bodyBackground}"`;

  this.domElement.innerHTML = `<p${'' || (this._themeProvider && style)}>this is a demo</p>`;
}

React ベースの Web パーツで背景色の認識を使用する

React ベースの Web パーツの場合は、基本的な Web パーツと同様に、 をThemeProvider使用するコードを実装する必要があります。

import {
  ThemeProvider,
  ThemeChangedEventArgs,
  IReadonlyTheme
} from '@microsoft/sp-component-base';
...

private _themeProvider: ThemeProvider;
private _themeVariant: IReadonlyTheme | undefined;

protected onInit(): Promise<void> {
  // Consume the new ThemeProvider service
  this._themeProvider = this.context.serviceScope.consume(ThemeProvider.serviceKey);

  // If it exists, get the theme variant
  this._themeVariant = this._themeProvider.tryGetTheme();

  // Register a handler to be notified if the theme variant changes
  this._themeProvider.themeChangedEvent.add(this, this._handleThemeChangedEvent);

  return super.onInit();
}

/**
 * Update the current theme variant reference and re-render.
 *
 * @param args The new theme
 */
private _handleThemeChangedEvent(args: ThemeChangedEventArgs): void {
  this._themeVariant = args.theme;
  this.render();
}

コンポーネントでテーマバリアントを使用するには、メソッドでテーマバリアントをコンポーネント render() に送信する必要があります。

public render(): void {
  const element: React.ReactElement<IBasicSectionBackgroundExampleProps > = React.createElement(
    BasicSectionBackgroundExample,
    {
      themeVariant: this._themeVariant
    }
  );

  ReactDom.render(element, this.domElement);
}

コンポーネントでそのプロパティを使用するには、プロパティ インターフェイス定義に追加する必要があります。この場合は と呼ばれます IBasicSectionBackgroundExampleProps。

import { IReadonlyTheme } from '@microsoft/sp-component-base';

export interface IBasicSectionBackgroundExampleProps {
  themeVariant: IReadonlyTheme | undefined;
}

次に、コンポーネントの render メソッドで、次のように正しい色を取得できます。

public render(): React.ReactElement<IBasicSectionBackgroundExampleProps> {

  const { semanticColors }: IReadonlyTheme = this.props.themeVariant;

  return (
    <div style={{backgroundColor: semanticColors.bodyBackground}}>
      <p>This React web part has support for section backgrounds and will inherit its background from the section</p>
    </div>
  );
}

関連項目

• セマンティック スロットを使用したセクションの背景のデザイン
• SharePoint Framework の概要
• SPFx セクションの背景サンプル