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

【问题标题】：How can I use grid layout with Fluent UI React如何在 Fluent UI React 中使用网格布局
【发布时间】：2020-08-21 02:39:11
【问题描述】：

安装@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 包。

【问题讨论】：

标签： reactjs office-ui-fabric-react fluent-ui

【解决方案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')
);

【讨论】：

【解决方案2】：

documentation 清楚地表明网格是一个遗留组件，不适合与 Fluent UI React 一起使用。

您可以直接使用CSS Grid。有关 Microsoft 365 上下文中的示例，请查看 this blog post。

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

【讨论】：

哈哈哈，是我在他们的问题页面上咆哮，然后他们改变了他们的文档。
哈哈，希望这些链接对未来的读者有所帮助。
嗯，文档说只有 ms-Grid 类只有在您使用 Fabric Core 时才可用，它没有提到它是遗留的，还是我遗漏了什么？
对，他们在另一个页面上详细说明了 Fabric Core 是旧版：developer.microsoft.com/en-us/office/blogs/… 下一次迭代 Fluent UI Northstar 使用了一个网格组件（！）。
我不太老的咆哮问题。 github.com/microsoft/fluentui/issues/13200 如果有人感兴趣。他们的大部分答案是一个方向，而不是真正的事情进展，但仍然有助于消除一些混乱。

【解决方案3】：

Stack 为 react-fluent 提供网格布局。

来自文档：

Stack 是一个容器类型的组件，它抽象了 flexbox 的实现，以便定义其子组件的布局。

例子：

const { DefaultPalette, Slider, Stack, IStackStyles, IStackTokens, ThemeProvider, initializeIcons } = window.FluentUIReact;

// Initialize icons in case this example uses them
initializeIcons();

// Non-mutating styles definition
const itemStyles: React.CSSProperties = {
  alignItems: 'center',
  background: DefaultPalette.themePrimary,
  color: DefaultPalette.white,
  display: 'flex',
  height: 50,
  justifyContent: 'center',
  width: 50,
};

// Tokens definition
const sectionStackTokens: IStackTokens = { childrenGap: 10 };
const wrapStackTokens: IStackTokens = { childrenGap: 30 };

const HorizontalStackWrapExample: React.FunctionComponent = () => {
  const [stackWidth, setStackWidth] = React.useState<number>(100);
  // Mutating styles definition
  const stackStyles: IStackStyles = {
    root: {
      background: DefaultPalette.themeTertiary,
      width: `${stackWidth}%`,
    },
  };

  return (
    <Stack tokens={sectionStackTokens}>
      <Slider
        label="Change the stack width to see how child items wrap onto multiple rows:"
        min={1}
        max={100}
        step={1}
        defaultValue={100}
        showValue={true}
        onChange={setStackWidth}
      />

      <Stack horizontal wrap styles={stackStyles} tokens={wrapStackTokens}>
        <span style={itemStyles}>1</span>
        <span style={itemStyles}>2</span>
        <span style={itemStyles}>3</span>
        <span style={itemStyles}>4</span>
        <span style={itemStyles}>5</span>
        <span style={itemStyles}>6</span>
        <span style={itemStyles}>7</span>
        <span style={itemStyles}>8</span>
        <span style={itemStyles}>9</span>
        <span style={itemStyles}>10</span>
      </Stack>
    </Stack>
  );
};

const HorizontalStackWrapExampleWrapper = () => <ThemeProvider><HorizontalStackWrapExample /></ThemeProvider>;
ReactDOM.render(<HorizontalStackWrapExampleWrapper />, document.getElementById('content'))

【讨论】：