时间戳

首页 > 解决方案 > 我不确定为什么 Office Fabric UI React 布局类不起作用

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

问题描述

我正在创建一个 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>
        )
    }
}

即使我使用了网格布局，组件也会垂直显示在彼此之上。我的期望是控件将水平布局，占据一列和十一列。

标签： reactjstypescriptsassoffice-ui-fabricoffice-ui-fabric-react

解决方案

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

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

推荐阅读