Forum Discussion

Saad Zulfiqar's avatar
Saad Zulfiqar
Copper Contributor
May 18, 2017

Using Office UI Fabric React with SharePoint hosted app

I have created SharePoint hosted app using VS2015, and in that i have used Office ui fabric react components. I have installed it and other packages of React and React-dom using npm, App is successfully deployed on my developer site. But fabric css is not rendering on my react components. If i explicitly give link to fabric.css like

<link  href="../node_modules/office-ui-fabric-react/dist/css/fabric.min.css"rel="stylesheet" />

on my default.aspx, it works. I want to ask that is there any way, may be, some configuration file where i just specify this

{
  ...  css : 'node_modules/office-ui-fabric-react'
  ...
}

to render css on page. If i use same procedure with my SharePoint framework app css renders without any issue. Also, SharePoint theme color is not being applied to my components. In the attached image, blue color should be replaced by the green. Is it so ?? Can i use Office fabric for applications other than SharePoint framework apps???? Any help ??

 

Attached is the image of my app. 

 

 

 

 

developer
SharePoint Online

1 Reply

  • Dmytro Lapshyn's avatar
    Dmytro Lapshyn
    Copper Contributor
    Jan 03, 2018

    We're building a SharePoint-hosted app where we extensively use Office UI Fabric React (+ some homegrown CSS patches that make it play nice with SharePoint 2013 on-premises CSS)

     

    We're bundling everything with Webpack + ts-loader + Node SASS + Babel and then attaching the resultant bundle to a SharePoint page via a single ScriptLink tag.

     

    We also have some "bootstrapper" code in App.js but that code basically does some preparatory work with the SharePoint SOD framework to load the bundle on-demand. Please note that you might not need that, as we have a specific requirement for loading the JavaScript SPA bundle only for a specific target audience so we want to avoid loading a ~ 2 Mb JavaScript file when it is not going to be used :)

     

    Please feel free to follow up with more specific questions - I will be happy to answer them