如何避免 MGT 组件出现在另一个组件后面

Question

我正在使用 Microsoft Graph Toolkit 显示来自 SharePoint SPFX Webpart 的用户信息。

具体来说，我使用mgt-person 和mgt-person-card 组件。

不幸的是，页面中有一些原生组件定义了z-index:2 css 规则（页面标题）。

这会导致奇怪的渲染：

红色是mgt-person 组件，绿色是mgt-person-card 组件，蓝色是本机页面标题。

如您所见，管理浮出控件位于页面标题后面。这是由于页面标题应用了 z-index 规则。

如何解决？

复制（不是 SPFX）：https://jsfiddle.net/stevebeauge/5Lg7c63n/

我尝试在我的 webpart CSS 中覆盖 z-index 规则，但这不起作用。

我什至找不到应用更高 z-index 的 DOM 元素（可能是由于 Web 组件及其影子 DOM 的混乱）。

SPFX 项目是使用@microsof/sharepoint yeoman 生成器生成的。我在我的 webpart 中引用了最新的 MGT npm 包：

declare global {
  namespace JSX {
    interface IntrinsicElements {
      'mgt-person': any;
      'mgt-person-card': any;
      'template': any;
    }
  }
}
export default class MyWebpartProp extends React.Component<IMyWebpartProp, {}> {
  public render() {
    return (
              <div className={styles.resultContainer}>
                <mgt-person user-id="me" show-name show-email person-card="click">

                  <template data-type="person-card">
                    <mgt-person-card person-details="{{person}}" person-image="{{personImage}}">
                      <template data-type="additional-details">
                       ... some markup ...
                      </template>
                    </mgt-person-card>
                  </template>

                </mgt-person>
              </div>
            );

  }


}

包.json：

"dependencies": {
    "@microsoft/decorators": "1.10.0",
    "@microsoft/mgt": "^1.1.0",
    "@microsoft/sp-application-base": "1.10.0",
    "@microsoft/sp-core-library": "1.10.0",
    "@microsoft/sp-dialog": "1.10.0",
    "@types/es6-promise": "0.0.33",
    "@types/webpack-env": "1.15.1",
    "custom-event-polyfill": "^1.0.7",
    "jshint": "^2.11.0"
},
"devDependencies": {
    "@microsoft/sp-build-web": "1.10.0",
    "@microsoft/sp-tslint-rules": "1.10.0",
    "@microsoft/sp-module-interfaces": "1.10.0",
    "@microsoft/sp-webpart-workbench": "1.10.0",
    "@microsoft/rush-stack-compiler-2.9": "0.10.3",
    "gulp": "~3.9.1",
    "@types/chai": "4.2.8",
    "@types/mocha": "7.0.1",
    "ajv": "~6.11.0"
}

Answer 1

只是为了在此处提供关闭，此问题应作为 Microsoft Graph Toolkit 1.2 更新的一部分进行修复。