Aplicar estilos a los componentes del kit de herramientas de Microsoft Graph

  • Artículo
  • Tiempo de lectura: 2 minutos

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. Puede encontrar las propiedades CSS personalizadas disponibles en cada documentación de componentes. Por ejemplo:

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

No puede aplicar estilo a los elementos internos de un componente a menos que proporcione una propiedad personalizada CSS. Los elementos secundarios del componente se hospedan en un dom de sombra.

Para obtener más flexibilidad, considere la posibilidad de usar plantillas personalizadas.

Aplicar temas

Hay dos temas disponibles: claro y oscuro. De forma predeterminada, todos los componentes tienen un estilo claro. Para cambiar al tema oscuro, simplemente puede aplicar class="mgt-dark" a la sección de la página HTML. Los componentes dentro de esa sección tendrán el tema oscuro aplicado. En los ejemplos siguientes se muestra cómo se aplicarán los temas en función de cómo se estructura el HTML.

Ejemplo 1: Tema global

<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 de componente individual

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

Ejemplo 3: Tema regional

<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 el tema

<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;
}