Constantly Loosing Styles And Images Using Office Fabric UI

[andrejohansson]

I'm trying to get this framework to behave but I must be missing something.

I've added some styles to the styles.global.scss file in order to create a pretty standard layout (header, footer, sidebar).

I've decided to use the Office Fabric React UI components.

I've then structured my root.tsx file as you can see below. But for some reason, the images and styles breaks. At first I thought it was a problem with the hot reloading but doing a production build does not help.

Is there something in the ReactQL pipeline that is "unusual" regarding to building and packaging that makes this incompatible with "standard rendering"?

Sometimes the css "comes back"if I click on items in the ui (without navigating). Somethings it works after a reload, sometimes i need to rebuild all. But I cannot see any pattern to it.

Also the log prints out occasional errors like:
react-dom.development.js:507 Warning: Prop `data-focuszone-id` did not match. Server: "FocusZone1296" Client: "FocusZone1"

Which makes me believe that something is way out of sync here.
Suggestions anyone?

PS I'm very new to both this starter kit and the Office Fabric kit.

root.tsx

// Root entry point

// ----------------------------------------------------------------------------
// IMPORTS

/* NPM */
import * as React from "react";
import Helmet from "react-helmet";
import { hot } from "react-hot-loader/root";
import { Route, Switch } from "react-router-dom";
import { Global } from "@emotion/core";
import { Fabric, loadTheme, initializeIcons } from "office-ui-fabric-react";

/* Local */

// Components
import ScrollTop from "@/components/helpers/scrollTop";

// Global styles
import globalStyles from "@/global/styles";

// Routes
import routes from "@/data/routes";
import Header from "./components/layout/Header";
import NavBar from "./components/layout/NavBar";
import Footer from "./components/layout/Footer";

loadTheme({
    palette: {
        themePrimary: "#2196f3",
        themeLighterAlt: "#f6fbfe",
        themeLighter: "#daedfd",
        themeLight: "#badefb",
        themeTertiary: "#78bef7",
        themeSecondary: "#3ba1f4",
        themeDarkAlt: "#1f86da",
        themeDark: "#1a71b8",
        themeDarker: "#135388",
        neutralLighterAlt: "#f8f8f8",
        neutralLighter: "#f4f4f4",
        neutralLight: "#eaeaea",
        neutralQuaternaryAlt: "#dadada",
        neutralQuaternary: "#d0d0d0",
        neutralTertiaryAlt: "#c8c8c8",
        neutralTertiary: "#d0d0d0",
        neutralSecondary: "#a0a0a0",
        neutralPrimaryAlt: "#747474",
        neutralPrimary: "#616161",
        neutralDark: "#4a4a4a",
        black: "#363636",
        white: "#ffffff"
    }
});

initializeIcons(/* optional base url */);

// ----------------------------------------------------------------------------

const Root = () => (
  <div>
    <Global styles={globalStyles} />
    <Helmet>
      <title>Pixon Administration</title>
    </Helmet>
    <ScrollTop>
        <Fabric  className="App">
            <div className="header">
                <Header />
            </div>
            <div className="body">
                <div className="content">
                    <Switch>
                        {routes.map(route => (
                            <Route key={route.path} {...route} />
                        ))}
                    </Switch>
                </div>
                <div className="sidebar">
                    <NavBar />
                </div>
            </div>
            <div className="footer">
                <Footer />
            </div>
        </Fabric>
    </ScrollTop>
  </div>
);

export default hot(Root);

Example: broken styles