Ejercicio: Componentes de estilo que coincidan con su marca

  • 8 minutos

En este ejercicio, aprenderá a usar propiedades CSS personalizadas con componentes del Kit de herramientas de Microsoft Graph para cambiar el estilo de la aplicación.

Antes de empezar

Como requisito previo para este ejercicio, deberá completar el ejercicio anterior: "Cambiar el comportamiento de los componentes mediante atributos".

Aplicar estilo al componente de inicio de sesión para que coincida con la personalización de la marca

Supongamos que quiere cambiar la apariencia del contenido del botón para el componente de Inicio de sesión. En index.html, puede usar la etiqueta <style> dentro de <head> para personalizar los componentes.

<head>
  <style>
  </style>
</head>

  1. Para personalizar el cuerpo de la página, agregue body{} entre las etiquetas <style>. Use la siguiente propiedad CSS dentro del selector body{}:

    • background-color cambia el color de fondo de la página para seguir el color de fondo del tema.
    • color cambia el color del texto de la página para seguir el color de texto del tema.

  2. Para personalizar el componente Inicio de sesión, agregue mgt-login{} entre las etiquetas <style>. Use las siguientes propiedades CSS dentro del selector mgt-login{}:

    • --login-button-padding modifica el espaciado dentro del elemento "correo del usuario". Defínalo como 30px para el mismo espacio desde arriba, abajo, izquierda y derecha.
    • --login-signed-in-background cambia el color de fondo del botón a slategrey
    • --login-popup-text-color cambia el color de fuente emergente del perfil de usuario a slategrey.

  3. Para personalizar el componente Agenda, agregue mgt-agenda{} entre las etiquetas <style>. Use las siguientes propiedades CSS dentro del selector mgt-agenda{}:

    • --agenda-header-font-size cambia el tamaño de fuente del encabezado de agenda a 24px.
    • --agenda-event-padding modifica el espaciado dentro de los eventos para 20px.
    • --agenda-event-background-color cambia el color de fondo del evento a slategrey.
    • --agenda-event-box-shadow cambia la sombra del cuadro de eventos a grey.
    <head>
  <style>
    body {
      background-color: var(--fill-color);
      color: var(--neutral-foreground-rest);
    }
    mgt-login {
      --login-signed-in-background: slategrey;
      --login-button-padding: 30px;
      --login-popup-text-color: slategrey;
    }
    mgt-agenda {
      --agenda-header-font-size: 24px;
      --agenda-event-padding: 20px;
      --agenda-event-background-color: slategrey;
      --agenda-event-box-shadow: grey;
    }
  </style>
</head>

  4. Vamos a agregar el componente para alternar el color del tema. Abra el archivo index.html y agregue la mgt-theme-toggle etiqueta a la <body> etiqueta.

    <html>
  <head>
    ...
  </head>
  <body>
    <mgt-theme-toggle></mgt-theme-toggle>
    ...
  </body>
</html>

La versión final del archivo index.html será similar a la de este ejemplo:

<!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/@microsoft/mgt@3/dist/bundle/mgt-loader.js"></script>

  <style>
    body {
      background-color: var(--fill-color);
      color: var(--neutral-foreground-rest);
    }
    mgt-login {
      --login-signed-in-background: slategrey;
      --login-button-padding: 30px;
      --login-popup-text-color: slategrey;
    }
    mgt-agenda {
      --agenda-header-font-size: 24px;
      --agenda-event-padding: 20px;
      --agenda-event-background-color: slategrey;
      --agenda-event-box-shadow: grey;
    }
  </style>
</head>
<body>

  <mgt-msal2-provider client-id="[Your-Client-ID]"></mgt-msal2-provider>

  <mgt-theme-toggle></mgt-theme-toggle>
  <mgt-login>
    <template data-type="signed-in-button-content" >
      <div>
        {{personDetails.mail}}
      </div>
    </template>
  </mgt-login>

  <mgt-agenda class="agenda"
      date="June 29, 2023"
      days="3"
      group-by-day>
  </mgt-agenda>

</body>
</html>

Probar la aplicación en el explorador

  1. En Visual Studio Code, seleccione la siguiente combinación de teclas y busque Live Server:

    • Windows: CTRL+SHIFT+P
    • macOS: COMMAND+SHIFT+P

    Ejecute Live Server para probar la aplicación.

  2. Abra el explorador y vaya a http://localhost:3000.

  3. Inicie sesión con su cuenta de desarrollador de Microsoft 365. Otorgue su consentimiento para los permisos necesarios y haga clic en Aceptar.

  4. Con el botón de alternancia del tema, cambie el tema a Oscuro.

  5. Por último, verá que los componentes se adaptan automáticamente al tema oscuro y que el estilo del botón de inicio de sesión ha cambiado.

Esta imagen muestra la versión final de la aplicación.

En general, los componentes del Kit de herramientas de Microsoft Graph son flexibles en lo que respecta a la personalización. Puede modificar el aspecto de los componentes mediante propiedades CSS personalizadas y hacerlas coincidir con la personalización de marca de la aplicación.