在 Microsoft Graph 中设置组件样式ToolkitStyling components in the Microsoft Graph Toolkit

每个 Microsoft Graph Toolkit组件都记录一组 CSS 自定义属性,可用于更改某些元素的外观。Each Microsoft Graph Toolkit component documents a set of CSS custom properties that you can use to change the look and feel of certain elements. 您可以在每个组件文档找到可用的自定义 CSS 属性。例如:You can find the available custom CSS properties in each component docs. For example:

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

除非提供 CSS 自定义属性,否则无法设置组件内部元素的样式。You can't style internal elements of a component unless you provide a CSS custom property. 组件子元素托管在卷影 dom 中The component child elements are hosted in a shadow dom.

为了更灵活,请考虑使用 自定义模板For more flexibility, consider using custom templates.

应用主题Apply themes

有两个主题可用 - 浅色和深色。Two themes are available - light and dark. 默认情况下,所有组件都使用浅色主题设置样式。By default, all components are styled with light theme. 若要切换到深色主题,只需应用到 HTML class="mgt-dark" 页面部分。To switch to dark theme, you can simply apply class="mgt-dark" to the section of your HTML page. 该部分内的组件将应用深色主题。The components inside that section will have dark theme applied. 以下示例显示了如何根据 HTML 的结构应用主题。The following examples show how themes will apply based on how you structure your HTML.

示例 1:全局主题Example 1: Global theme

<body class="mgt-light">
    <!-- light theme will apply to all components in this section -->
    <header><mgt-login></mgt-login></header>
    <article><mgt-agenda></mgt-agend></article>
    <footer></footer>
</body>

示例 2:单个组件主题Example 2: Individual component theme

<mgt-person-card class="mgt-dark"></mgt-person-card>

示例 3:区域主题Example 3: Regional theme

<div class="mgt-light">
    <header class="mgt-dark">
        // login component will have dark theme
        <mgt-login></mgt-login>
    </header>
    <article>
        // agenda component will have light theme
        <mgt-agenda></mgt-agenda>
    </article>
</div>

示例 4:使用主题自定义 CSSExample 4: Customize CSS with theme

<mgt-people-picker class="mgt-dark custom-class"></mgt-people-picker>
mgt-people-picker.custom-class {
    --input-background-color: $custom-background-color;
    --input-border: $custom-input-border;
}