1

I am creating a React app and using Office Fabric UI React.

I imported the latest version using npm/yarn "office-ui-fabric-react": "7.94.0",. Here is my TSX file which is not producing the desired results:

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>
        )
    }
}

Even though I used the grid layout, the components show up on top of each other vertically. My expectation was that the controls would be laid out horizontally taking up one column and eleven columns up.

myermian
  • 31,823
  • 24
  • 123
  • 215

1 Answers1

1

Do you import the stylesheet in your html ?

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

Lumpenstein
  • 1,250
  • 1
  • 10
  • 27
  • Nope. I was unaware that you had to import the style sheets. I guess I assumed that installing the npm module would be enough. – myermian Feb 28 '20 at 13:57
  • The npm package includes all the styles for the components like your searchbox etc. If you use the classNames themselfs you have to import the stylesheet :) I suggest to only use the components with their styleprops, but there is no Grid at the moment, only Stack. – Lumpenstein Feb 28 '20 at 15:24