Я создаю приложение 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>
)
}
}
Несмотря на то, что я использовал макет сетки , компоненты отображаются друг над другом вертикально. Я ожидал, что элементы управления будут расположены горизонтально, занимая один столбец и одиннадцать столбцов вверх.