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

Question

我正在使用 Microsoft Graph 工具包显示来自 SharePoint SPFX web 部件的用户信息。

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

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

这会导致奇怪的渲染：

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

如您所见，mgt 弹出窗口位于页面标题后面。这是由于 z-index 规则应用于页面标题。

如何解决？

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

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

我什至找不到一个 DOM 元素来应用更高的 z-index（可能是由于网络组件及其阴影 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>
            );

  }


}

Package.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 工具包 1.2 更新的一部分得到修复。

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

How to avoid MGT component to appears behind another

spfx

microsoft-graph-toolkit