1

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

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

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

这会导致奇怪的渲染：

奇怪的结果

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

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

如何解决？

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

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

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

SPFX 项目是使用@microsof/sharepointyeoman 生成器生成的。我在我的 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"
}
4

1 回答 1

2

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

于 2020-04-08T16:43:23.970 回答