Как избежать, чтобы компонент MGT оказался позади другого - PullRequest
Новая
       15

Как избежать, чтобы компонент MGT оказался позади другого

0 голосов
/ 04 февраля 2020

Я использую Microsoft Graph Toolkit для отображения информации о пользователях из веб-части SharePoint SPFX.

В частности, я использую компоненты mgt-person и mgt-person-card.

К сожалению, есть некоторые собственные компоненты на странице, которые определяют правило z-index:2 css (заголовок страницы).

Это приводит к странному отображению:

weird result

Красный - это mgt-person компонент, зеленый - это mgt-person-card компонент, а синий - это собственное название страницы.

Как видите, выпадающий список mgt находится за заголовком страницы. Это связано с правилами z-index, применяемыми к заголовку страницы.

Как это исправить?

Воспроизведение (не SPFX): https://jsfiddle.net/stevebeauge/5Lg7c63n/

Я пытаюсь переопределить правило z-index в моей веб-части CSS, но это не работает.

Я даже не смог найти элемент DOM, где можно применить более высокий z- index (возможно, из-за путаницы веб-компонента и его теневого DOM).

Проект SPFX был сгенерирован с использованием генератора @microsof/sharepoint yeoman. Я ссылался на последний пакет 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"
}

1 Ответ

1 голос
/ 08 апреля 2020

Просто, чтобы обеспечить закрытие здесь, эта проблема должна быть исправлена ​​как часть обновления 1.2 Microsoft Graph Toolkit.

...