Как использовать макет сетки с Fluent UI React

Question

После установки @fluentui/response я пытаюсь использовать сетку вроде этого документа https://developer.microsoft.com/en-us/fluentui

ReactDOM.render(
  <React.StrictMode>
      <div className="ms-Grid" dir="ltr">
          <div className="ms-Grid-row">
              <div className="ms-Grid-col ms-sm4 ms-xl4">A</div>
              <div className="ms-Grid-col ms-sm8 ms-xl8">B</div>
          </div>
      </div>
  </React.StrictMode>,
  document.getElementById('root')
);

Но это не работает, другие компоненты управления работают нормально. Я что-то пропустил?

В их документации упоминается только пакет npm.

Answer 1

Вы можете попробовать вот так.

import React, { Component } from 'react';
import 'office-ui-fabric-react/dist/css/fabric.css';

ReactDOM.render(
  <React.StrictMode>
      <div className="ms-Grid" dir="ltr">
          <div className="ms-Grid-row">
              <div className="ms-Grid-col ms-sm4 ms-xl4">A</div>
              <div className="ms-Grid-col ms-sm8 ms-xl8">B</div>
          </div>
      </div>
  </React.StrictMode>,
  document.getElementById('root')
);

Answer 2

В документации четко указано, что сетка является устаревшим компонентом и не предназначена для использования с Fluent UI React.

Вы можете напрямую использовать CSS Grid . В качестве примера в контексте Microsoft 365 ознакомьтесь с этим сообщением в блоге .

[Обновление] Обратите внимание, что Fluent UI Northstar ( @fluentui/react-northstar) имеет компонент Grid .

Answer 3

Стек предоставляет макет сетки для реагирующего.

Из документации:

Стек - это компонент контейнерного типа, который абстрагирует реализацию гибкого бокса для определения компоновки его дочерних компонентов.

Пример: