Microsoft Graph Toolkit でのコンポーネントのスタイル設定
各 Microsoft Graph Toolkit コンポーネントには、特定の要素の外観を変更するために使用できる CSS カスタム プロパティ のセットが文書化されています。 使用可能なカスタム CSS プロパティは、各コンポーネント ドキュメントにあります。例えば：
.person {
--person-avatar-size: 34px;
}
<mgt-person class="person" person-query="me" view="fourlines" id="online" show-presence></mgt-person>
CSS カスタム プロパティを指定しない限り、コンポーネントの内部要素のスタイルを設定することはできません。 コンポーネントの子要素は 、シャドウ dom でホストされます。
柔軟性を高めるために、 カスタム テンプレートの使用を検討してください。
テーマを適用する
と の lightdark2 つのテーマを使用できます。 これらのテーマは、mgt コンポーネントで Fluent UI Web 要素を使用するため、自動的にサポートされます。 既定では、すべてのコンポーネントがテーマに含 light まれています。 テーマに dark 切り替えるには、コンポーネントを使用 mgt-theme-toggle してドキュメント全体に対してグローバルに行うか、コンポーネントにカスタム CSS トークン値を設定してコンポーネントのテーマを更新できます。
例 1: mgt-theme-toggle を使用したグローバル テーマ
mgt-theme-toggle コンポーネントを使用すると、テーマ作成エクスペリエンスに便利な任意の場所に配置することで、ドキュメントのテーマを設定できます。 このコンポーネントは、モードと モードの切り替えに使用できるトグル light を dark レンダリングします。
<body>
<mgt-theme-toggle></mgt-theme-toggle>
<header><mgt-login></mgt-login></header>
<article><mgt-agenda></mgt-agenda></article>
<footer></footer>
</body>
例 2: テーマ切り替えなしでコンポーネントをプログラム的にテーマ化する
コンポーネントを使用せずに、プログラムで個々のコンポーネントにテーマを theme-toggle 設定できます。 これは、 または と HTML 要素としてlightdarkモードをapplyTheme受け取る から @microsoft/mgt 関数を呼び出すことによって実現されます。 既定では、すべての要素がテーマに light レンダリングされます。
特定の要素をダーク テーマに設定する
2 番目 mgt-login のコンポーネントをテーマに dark 設定し、他の 2 つをテーマのままに light することができます。
<mgt-login id="login-one"></mgt-login>
<mgt-login id="login-two"></mgt-login>
<mgt-login id="login-one"></mgt-login>
import { applyTheme } from "@microsoft/mgt-components";
const loginTwo = document.querySelector("#login-two");
if (loginTwo) {
applyTheme("dark", loginTwo);
}
例 3: コンポーネントの CSS トークンをカスタマイズする
現在のテーマの色をオーバーライドする場合は、いくつかの CSS トークンを使用してコンポーネントのスタイルを設定できます。 特定のコンポーネント ページを確認して、使用可能なトークンの一覧を取得します。
注: これらのトークンをカスタマイズすることは、設定値が使用される既定値であり、コンポーネントを
mgt-theme-toggle使用しても効果がないことを意味します。
<mgt-people-picker class="people-picker"></mgt-people-picker>
.people-picker {
--people-picker-selected-option-background-color: orange;
--people-picker-selected-option-highlight-background-color: red;
--people-picker-dropdown-background-color: blue;
--people-picker-dropdown-result-background-color: yellow;
--people-picker-dropdown-result-hover-background-color: gold;
--people-picker-dropdown-result-focus-background-color: green;
--people-picker-no-results-text-color: orange;
--people-picker-input-background: gray;
--people-picker-input-border-color: yellow;
--people-picker-input-hover-background: green;
--people-picker-input-hover-border-color: red;
--people-picker-input-focus-background: purple;
--people-picker-input-focus-border-color: orange;
--people-picker-input-placeholder-focus-text-color: yellow;
--people-picker-input-placeholder-hover-text-color: gold;
--people-picker-input-placeholder-text-color: white;
--people-picker-search-icon-color: yellow;
--people-picker-remove-selected-close-icon-color: blue;
/** You can also change the person tokens **/
--person-line1-text-color: blue;
--person-line2-text-color: red;
}
DOM 内のすべての要素に適用されるカスタマイズにグローバル トークンを使用することもできます。 ツールキットは、次のカスタム CSS グローバル トークンを定義します。
<mgt-file-list></mgt-file-list>
body {
/**
* Overrides the default font-family 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, 'BlinkMacSystemFont', 'Roboto', 'Helvetica Neue', sans-serif for dark and light theme.
*/
--default-font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
/**
* Overrides the default font-size of 14px
*/
--default-font-size: 20px;
}
例 4: Fluent UI CSS トークンをカスタマイズする
Fluent UI で使用されるトークンをカスタマイズして、コンポーネントで使用される fluent UI コンポーネントのスタイルを設定 mgt できます。 Fluent UI Web コンポーネントは、デザイン トークンのファーストクラスのサポートを提供し、デザイン トークンの設定、取得、および使用を簡単にします。
Fluent UI Web コンポーネントをカスタマイズする方法の詳細については、「 デザイン トークン」を参照してください。
または、既存のデザイン トークン値を独自の値でオーバーライドすることもできます。 設定した値は、基になる Fluent UI 要素を持つコンポーネントが mgt 使用される DOM 全体で使用されるため、この方法はお勧めしません。 またはdarkテーマ モードではlight変更されません。
<mgt-login></mgt-login>
body {
/**
* Overrides the default #ffffff color for dark theme and #000000 color for light theme
*/
--neutral-foreground-rest: yellow !important;
/**
* Overrides the default fluent UI components font-family
*/
--body-font: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
テーマ モード:light
テーマ モード:dark
