Stylisation des composants dans la boîte à outils Microsoft GraphStyling components in the Microsoft Graph Toolkit

Utilisez les propriétés CSS personnalisées pour modifier les styles des composants.Use CSS custom properties to modify the component styles.

Chaque composant documente un ensemble de Propriétés CSS personnalisées que vous pouvez utiliser pour modifier l’apparence de certains éléments.Each component documents a set of CSS custom properties that you can use to change the look and feel of certain elements. Par exemple :For example:

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

Vous ne pouvez pas définir le style des éléments internes d’un composant sauf si vous fournissez une propriété CSS personnalisée.You can't style internal elements of a component unless you provide a CSS custom property. Les éléments enfants du composant sont hébergés dans une ombre DOM.The component child elements are hosted in a shadow dom.

Pour plus de flexibilité, envisagez d’utiliser des modèles personnalisés.For more flexibility, consider using custom templates.

Désactiver le modèle DOM ombré (expérimental)Disable the shadow dom (experimental)

Vous pouvez désactiver le modèle de cliché instantané DOM et les éléments internes de style directement à l’aide de feuilles de style useShadowDom de navigateur MgtBaseComponent normales, en définissant la propriété statique de la classe sur false avant d’utiliser des balises de gestion.You can disable the shadow dom, and directly style internal elements using normal browser stylesheets, by setting the static property useShadowDom of the MgtBaseComponent class to false before using any MGT tags.

<script type="module">
  import { MgtBaseComponent } from './dist/es6/components/baseComponent.js';
   MgtBaseComponent.useShadowRoot = false;
</script>

<script type="module" src="./dist/es6/components/mgt-tasks/mgt-tasks.js"></script>