2

I have written a SPFX Application Customizer.

The purpose of the customizer is to read in the current page list ID and Site Url. It then passes the information through to the React Components.

I have a main React component (MainClosureBar) that loads up two sub components. (SiteClosure and LibraryClosure) Each sub component performs some calls and then renders a MessageBar depending on values from the calls.

  • MainClosureBar.tsx
    • SiteClosureBar.tsx
    • LibraryClosureBar.tsx

The HTML for my message bar that is in both SiteClosureBar and LibraryClosureBar is below.

<MessageBar className={this.state.classMessageBar} messageBarType={this.state.messageBarType} ariaLabel={this.state.message} isMultiline={false}>{this.state.message}</MessageBar>

When running in debug mode the Icon for the MessageBar display's correctly.

enter image description here

However, if I deploy the SPFX to the App store and create a custom action to load the App, when it displays the two MessageBars the icon is a square.

enter image description here

I've worked out why this is happening but unsure how to fix. I'm using this code on a Library page and I've noticed that in the network calls, static2.sharepointonline.com/files/fabric/assets/icons/…woff are not loading. These load automatically on Modern pages, but not on modern Library pages. How can I ensure these load?

  • I've worked out why this is happening but unsure how to fix. I'm using this code on a Library page and I've noticed that in the network calls, static2.sharepointonline.com/files/fabric/assets/icons/… are not loading. These load automatically on Modern pages, but not on Library pages. How can I ensure these load? – Cann0nF0dder Jan 10 '18 at 9:04
2

I was missing an import in my sass file. At the top of my file I added the import

@import '~office-ui-fabric-core/dist/sass/Fabric.scss'

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.