如何修改Microsoft Graph Toolkit组件的字体族？

直接给<mgt-person>设置font-family样式没效果，核心原因是这个组件基于Shadow DOM构建，外部CSS默认无法穿透到组件内部的元素。试试这几个可行方案：

• 利用组件暴露的::part选择器（如果组件提供了可定制的part）定位内部文本区域：

  mgt-person::part(person-details) {
    font-family: "Roboto" !important;
  }
  

• 若组件未暴露可定制的part，使用Shadow DOM穿透选择器直接选中内部的文本类：

  mgt-person::shadow .person-name,
  mgt-person::shadow .person-title {
    font-family: "Roboto" !important;
  }
  

• 通过JavaScript直接往组件的Shadow根节点插入样式：

  const personComp = document.querySelector('mgt-person');
  const styleTag = document.createElement('style');
  styleTag.textContent = `
    .person-name, .person-title {
      font-family: "Roboto" !important;
    }
  `;
  personComp.shadowRoot.appendChild(styleTag);
  

内容的提问来源于stack exchange，提问作者Andrew Steven