web-dev-qa-db-ja.com

Fluent UIでグリッドレイアウトを使用するにはどうすればよいですかReact

@ 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パッケージについてのみ言及しています。

reactjsoffice-ui-fabric-reactfluent-ui
1
thReality

そのように試すことができます。

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