Microsoft Graph Toolkit を使用して、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、うまくいきません。
より高い z-index を適用する DOM 要素を見つけることさえできませんでした (おそらく Web コンポーネントとそのシャドウ DOM の混乱が原因です)。
SPFX プロジェクトは、@microsof/sharepointyeoman ジェネレーターを使用して生成されました。最新の MGT npm パッケージと私の Web パーツを参照しました。
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"
}