Я не уверен, почему классы макетов Office Fabri c UI React не работают - PullRequest
1 голос
/ 23 февраля 2020

Я создаю приложение React и использую Office Fabri c Пользовательский интерфейс 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>
        )
    }
}

Несмотря на то, что я использовал макет сетки , компоненты отображаются друг над другом вертикально. Я ожидал, что элементы управления будут расположены горизонтально, занимая один столбец и одиннадцать столбцов вверх.

1 Ответ

1 голос
/ 28 февраля 2020

Импортируете ли вы таблицу стилей в html?

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

...