我不确定为什么 Office Fabric UI React 布局 类 不工作

Question

我正在创建一个 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，组件也会垂直显示在彼此之上。我的期望是控件将水平放置，占据一列和十一列。

Answer 1

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

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