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

  • Artículo

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:

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

<mgt-person class="person" person-query="me" view="fourlines" id="online" show-presence></mgt-person>

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: light y dark. Estos temas se admiten automáticamente porque los componentes mgt usan elementos web de la interfaz de usuario de Fluent. De forma predeterminada, todos los componentes están en light el tema. Para cambiar al dark tema, puede hacerlo globalmente para todo el documento mediante el mgt-theme-toggle componente, o bien puede actualizar el tema de un componente estableciendo los valores de token CSS personalizados en el componente.

Ejemplo 1: Tema global con mgt-theme-toggle

Con el componente mgt-theme-toggle , puede establecer el tema para el documento colocándolo en cualquier lugar que sea conveniente para su experiencia de temas. Este componente representará un botón de alternancia que puede usar para cambiar entre light los modos y dark .

<body>
  <mgt-theme-toggle></mgt-theme-toggle>
  <header><mgt-login></mgt-login></header>
  <article><mgt-agenda></mgt-agenda></article>
  <footer></footer>
</body>

Ejemplo 2: Creación de temas de un componente mediante programación sin el botón de alternancia de tema

Puede asignar un tema a un componente individual mediante programación sin usar el theme-toggle componente . Esto se logra llamando a la applyTheme función desde @microsoft/mgt que toma el modo como light o dark y el elemento HTML. De forma predeterminada, todos los elementos se representan en el light tema.

Establecer elementos específicos en el tema oscuro

Puede establecer el segundo mgt-login componente dark en tema y dejar los otros dos en light tema.

<mgt-login id="login-one"></mgt-login>
<mgt-login id="login-two"></mgt-login>
<mgt-login id="login-one"></mgt-login>

import { applyTheme } from "@microsoft/mgt-components";

const loginTwo = document.querySelector("#login-two");

if (loginTwo) {
  applyTheme("dark", loginTwo);
}

Ejemplo 3: Personalización de tokens CSS de un componente

Puede usar varios tokens CSS para aplicar estilo a un componente si desea invalidar los colores de tema actuales. Compruebe la página de componentes determinada para obtener la lista de tokens que están disponibles.

Nota: la personalización de estos tokens significa que los valores establecidos son los valores predeterminados que se usan y el uso del mgt-theme-toggle componente no tendrá ningún efecto.

<mgt-people-picker class="people-picker"></mgt-people-picker>

.people-picker {
  --people-picker-selected-option-background-color: orange;
  --people-picker-selected-option-highlight-background-color: red;
  --people-picker-dropdown-background-color: blue;
  --people-picker-dropdown-result-background-color: yellow;
  --people-picker-dropdown-result-hover-background-color: gold;
  --people-picker-dropdown-result-focus-background-color: green;
  --people-picker-no-results-text-color: orange;
  --people-picker-input-background: gray;
  --people-picker-input-border-color: yellow;
  --people-picker-input-hover-background: green;
  --people-picker-input-hover-border-color: red;
  --people-picker-input-focus-background: purple;
  --people-picker-input-focus-border-color: orange;
  --people-picker-input-placeholder-focus-text-color: yellow;
  --people-picker-input-placeholder-hover-text-color: gold;
  --people-picker-input-placeholder-text-color: white;
  --people-picker-search-icon-color: yellow;
  --people-picker-remove-selected-close-icon-color: blue;
  /** You can also change the person tokens **/
  --person-line1-text-color: blue;
  --person-line2-text-color: red;
}

También puede usar tokens globales para la personalización que se aplica a todos los elementos del DOM. El kit de herramientas define los siguientes tokens globales CSS personalizados.

<mgt-file-list></mgt-file-list>

body {
  /**
  * Overrides the default font-family 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, 'BlinkMacSystemFont', 'Roboto', 'Helvetica Neue', sans-serif for dark and light theme.
  */
  --default-font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;

  /**
  * Overrides the default font-size of 14px
  */
  --default-font-size: 20px;
}

Ejemplo 4: Personalización de tokens CSS de la interfaz de usuario de Fluent

Puede personalizar los tokens utilizados por la interfaz de usuario de Fluent para aplicar estilo al componente de interfaz de usuario de Fluent que se usa en un mgt componente. Fluent UI Web Components proporciona compatibilidad de primera clase con tokens de diseño y facilita la configuración, obtención y uso de tokens de diseño.

Para obtener más información sobre cómo personalizar los componentes web de la interfaz de usuario de Fluent, consulte Tokens de diseño.

Como alternativa, puede invalidar los valores de token de diseño existentes con sus propios valores. No se recomienda esta práctica porque el valor establecido se usará en todo el DOM donde se usa un mgt componente con un elemento de interfaz de usuario de Fluent subyacente. No cambiará en light los modos de tema o dark .

<mgt-login></mgt-login>

body {
  /**
  * Overrides the default #ffffff color for dark theme and #000000 color for light theme
  */
  --neutral-foreground-rest: yellow !important;

  /**
  * Overrides the default fluent UI components font-family
  */
  --body-font: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;

}

En light el modo de tema:

El valor del token de diseño de la interfaz de usuario fluida ha cambiado a amarillo en modo claro

En dark el modo de tema:

El valor del token de diseño de la interfaz de usuario de Fluent ha cambiado a amarillo en modo oscuro