如何在 Fluent UI React 中使用网格布局

Question

安装@fluentui/react 后，我​​尝试使用像这个文档https://developer.microsoft.com/en-us/fluentui#/styles/web/layout这样的网格

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

该文档明确指出网格是一个遗留组件，不适合与 Fluent UI React 一起使用。

您可以直接使用CSS 网格。有关 Microsoft 365 上下文中的示例，请查看此博客文章。

[更新] 请注意，Fluent UI Northstar ( @fluentui/react-northstar) 有一个Grid 组件。

Answer 2

你可以这样试试。

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')
);