我不确定为什么 Office Fabric UI React 布局类不起作用答案

【问题标题】：I'm not sure why the Office Fabric UI React layout classes not working我不确定为什么 Office Fabric UI React 布局类不起作用
【发布时间】：2020-06-07 08:13:00
【问题描述】：

我正在创建一个 React 应用程序并使用 Office Fabric UI React。

我使用 npm/yarn "office-ui-fabric-react": "7.94.0", 导入了最新版本。这是我的 TSX 文件，它没有产生预期的结果：

import React from 'react';
import { Image, SearchBox } from 'office-ui-fabric-react';

import './app-header.scss';
import Logo from './logo.svg'

export default class AppHeader extends React.Component {
    render() {
        return (
            <div className="app-header ms-Grid" dir="ltr">
                <div className="ms-Grid-row">
                    <div className="ms-Grid-col ms-lg1">
                        <Image src="{Logo}" />
                    </div>
                    <SearchBox className="ms-Grid-col ms-lg11" placeholder="Search" />
                </div>
            </div>
        )
    }
}

尽管我使用了grid layout，但组件还是垂直重叠显示。我的期望是控件将水平布局，占据一列和十一列。

【问题讨论】：

标签： reactjs typescript sass office-ui-fabric office-ui-fabric-react

【解决方案1】：

您是否在 html 中导入样式表？

<link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/9.6.1/css/fabric.min.css"/>

【讨论】：

不。我不知道您必须导入样式表。我想我认为安装 npm 模块就足够了。
npm 包包含组件的所有样式，例如搜索框等。如果您自己使用类名，则必须导入样式表 :) 我建议只使用带有 styleprops 的组件，但是有目前没有 Grid，只有 Stack。