問題タブ [microsoft-graph-toolkit]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
spfx - MGT コンポーネントが別のコンポーネントの背後に表示されないようにする方法
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 パーツを参照しました。
パッケージ.json:
reactjs - 親コンポーネントからユーザー ID を更新するときに、子コンポーネントで mgt-people が更新されない
親コンポーネントから小道具を取得するmgt-peopleとの両方を持つ React コンポーネントがあります。から人を選択mgt-people-pickerして更新するという考えですが、うまくいきません。単純に更新されたので、mgt コンポーネントの問題ではないでしょうか? また、子コンポーネントでローカル状態を作成しようとしましたが、どちらも機能しませんでした。mgt-peoplemgt-people-picker<div>{props.users}</div>users
私の簡略化されたコードは次のとおりです。すべてのusers変数の型はstring[]
親：
子：