Microsoft Graph ツールキットのコンポーネントのスタイル設定Styling components in the Microsoft Graph Toolkit

コンポーネントスタイルを変更するには、CSS カスタムプロパティを使用します。Use CSS custom properties to modify the component styles.

各コンポーネントには、特定の要素の外観を変更するために使用できるCSS カスタムプロパティのセットが記載されています。Each component documents a set of CSS custom properties that you can use to change the look and feel of certain elements. 次に例を示します。For example:

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

CSS カスタムプロパティを指定しない場合、コンポーネントの内部要素をスタイル設定することはできません。You can't style internal elements of a component unless you provide a CSS custom property. コンポーネント子要素は、シャドウ domでホストされます。The component child elements are hosted in a shadow dom.

柔軟性を高めるために、カスタムテンプレートの使用を検討してください。For more flexibility, consider using custom templates.

シャドウ dom (実験的) を無効にするDisable the shadow dom (experimental)

シャドウ dom を無効にして、通常のブラウザースタイルシートを使用して内部要素のスタイルをuseShadowDom直接設定MgtBaseComponentすることができます。そのためには、いずれかのプロパティを false に設定してから、任意のプロパティを使用します。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>