Componentes de estilo en microsoft Graph Toolkit

Cada componente Graph Toolkit microsoft documenta un conjunto de propiedades personalizadas css que puede usar para cambiar el aspecto de determinados elementos. Puede encontrar las propiedades CSS personalizadas disponibles en cada documento de componentes. Por ejemplo:

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

No puede dar 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 con tema claro. Para cambiar al tema oscuro, simplemente puede aplicar a class="mgt-dark" la sección de la página HTML. Los componentes dentro de esa sección tendrán un 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 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;
}