在 Microsoft Graph 工具包中设置组件样式

项目
11/07/2024

每个 Microsoft Graph 工具包组件都记录了一组 CSS 自定义属性，可用于更改某些元素的外观。可以在每个组件文档中找到可用的自定义 CSS 属性。例如：

.person {
  --person-avatar-size: 34px;
}

<mgt-person class="person" person-query="me" view="fourlines" id="online" show-presence></mgt-person>

除非提供 CSS 自定义属性，否则无法设置组件内部元素的样式。组件子元素托管在阴影 dom 中。

为了提高灵活性，请考虑使用自定义模板。

应用主题

有两个主题可用 - light 和 dark。自动支持这些主题，因为 mgt 组件使用 Fluent UI Web 元素。默认情况下，所有组件都以主题显示 light 。若要切换到 dark 主题，可以使用组件为整个文档 mgt-theme-toggle 全局执行此操作，也可以通过在组件上设置自定义 CSS 令牌值来更新组件的主题。

示例 1：使用 mgt-theme-toggle 的全局主题

使用 mgt-theme-toggle 组件，可以通过将文档放置在适合主题设置体验的任何位置来设置文档的主题。此组件将呈现可用于在和 dark 模式之间light切换的切换开关。

<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 组件即可以编程方式对单个组件进行主题化。这是通过从调用 applyTheme 采用模式的函数 @microsoft/mgt 或 lightdark 和 HTML 元素来实现的。默认情况下，所有元素都呈现在主题中 light 。

将特定元素设置为深色主题

可以将第二个 mgt-login 组件设置为 dark 主题，并将其他两个组件保留在主题中 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 使用的令牌，以设置组件中使用的 mgt fluent UI 组件的样式。 Fluent UI Web 组件为设计令牌提供一流的支持，使设置、获取和使用设计令牌变得简单。

有关如何自定义 Fluent UI Web 组件的详细信息，请参阅设计令牌。

或者，可以使用自己的值替代现有设计标记值。我们不建议这样做，因为设置的值将在整个 DOM 中使用，其中 mgt 使用了具有基础 Fluent UI 元素的组件。在或 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 主题模式下：

Fluent UI 设计标记值在浅色模式下更改为黄色

在 dark 主题模式下：

Fluent UI 设计标记值在深色模式下更改为黄色

通过