Componentes de estilos en el kit de herramientas de Microsoft GraphStyling components in the Microsoft Graph Toolkit

Cada componente del kit de herramientas de Microsoft Graph documenta un conjunto de propiedades personalizadas CSS que puede usar para cambiar la apariencia de determinados elementos.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. Puede encontrar las propiedades CSS personalizadas disponibles en los documentos de cada componente. Por ejemplo:You can find the available custom CSS properties in each component docs. For example:

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

No se pueden aplicar estilos a elementos internos de un componente a menos que se proporcione una propiedad CSS personalizada.You can't style internal elements of a component unless you provide a CSS custom property. Los elementos secundarios del componente se hospedan en un DOM de sombra.The component child elements are hosted in a shadow dom.

Para mayor flexibilidad, considere la posibilidad de usar plantillas personalizadas.For more flexibility, consider using custom templates.

Aplicar temasApply themes

Hay dos temas disponibles: claro y oscuro.Two themes are available - light and dark. De forma predeterminada, todos los componentes tienen un estilo claro con tema claro.By default, all components are styled with light theme. Para cambiar al tema oscuro, simplemente puede aplicarse class="mgt-dark" a la sección de la página HTML.To switch to dark theme, you can simply apply class="mgt-dark" to the section of your HTML page. Los componentes dentro de esa sección tendrán aplicado un tema oscuro.The components inside that section will have dark theme applied. Los siguientes ejemplos muestran cómo se aplican los temas en función de cómo se estructura el código HTML.The following examples show how themes will apply based on how you structure your HTML.

Ejemplo 1: tema globalExample 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>

Ejemplo 2: tema individual del componenteExample 2: Individual component theme

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

Ejemplo 3: tema regionalExample 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>

Ejemplo 4: personalizar CSS con temaExample 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;
}