与品牌匹配的样式组件

3 分钟

Microsoft Graph 工具包组件可以灵活地进行自定义。如果想改变组件的外观和感觉，可以使用一组自定义 CSS 属性轻松实现。

Microsoft Graph 工具包组件使用影子 DOM。这意味着它们与你的 Web 应用的其余部分是隔离的。例如，如果将 Web 应用的全局字体颜色更改为蓝色，Microsoft Graph 工具包组件仍将使用其默认颜色。

Microsoft Graph 工具包组件样式。

这种隔离是有意为之，以便 Microsoft Graph 工具包组件始终按预期呈现并且不受 Web 应用特定样式的影响。

若要设置 Microsoft Graph 工具包的内容样式，请使用组件公开的自定义 CSS 属性。例如，若要更改用于在日程组件中显示事件的字体颜色：

<style>
  mgt-agenda {
    --agenda-header-color: blue;
    --agenda-event-time-color: blue;
    --agenda-event-subject-color: blue;
    --agenda-event-location-color: blue;
  }
</style>

Microsoft Graph 工具包组件样式与 CSS 自定义属性。

可以在每个组件的文档中找到有关每个组件公开的可用自定义 CSS 属性的详细信息。

Microsoft Graph 工具包还提供明暗主题。

添加对切换主题的支持的最简单方法是使用 mgt-theme-toggle 组件并将正文背景和字体颜色设置为变量以遵循主题。

<head>
  <!-- trimmed for brevity -->
  <style>
    body {
      background-color: var(--fill-color);
      color: var(--neutral-foreground-rest);
    }
  </style>
</head>
<body>
    <!-- trimmed for brevity -->
    <mgt-theme-toggle></mgt-theme-toggle>
    <mgt-people-picker></mgt-people-picker>
</body>

使用深色主题的 Microsoft Graph 工具包组件。

如果使用自定义逻辑来切换应用的主题，则可以让 Microsoft Graph 工具包组件通过编程方式应用主题来遵循主题。

<div id="graph">
    <mgt-people-picker></mgt-people-picker>
</div>
<script>
    let region = document.getElementById('graph');
    mgt.applyTheme('dark', region);
</script>

具有深色主题的 Microsoft Graph 工具包组件的屏幕截图。

继续

与品牌匹配的样式组件

反馈