1

I'm trying to use the fabric List component in an spfx webpart. The code below was taken directly from https://dev.office.com/fabric#/components/list

return (
     <div >
      <div className='ms-ListItem is-unread is-selectable'>
      <span className='ms-ListItem-primaryText'>Title</span>
      <span className='ms-ListItem-tertiaryText'>Description</span>
    </div>

    )

The Title and description appear in exactly the same font. Is there something special I need to do to get the fabric css included in an spfx webpart?

I tried including

require('../../../node_modules/office-ui-fabric-react/dist/css/fabric.css');

but it made no difference

  • Needed to include require('../../../node_modules/office-ui-fabric/dist/css/fabric.component..css'); – russellg Jun 6 '17 at 20:11
  • manually requiring the above broke the drop downs and some other components in my app. i ended up reverting that change, the css classes noted in my question are not included in the office ui fabric react css so they have no effect. i have no idea why. ended up using custom css. – russellg Jun 14 '17 at 1:01
0

So,

What does F12 Network tab reveal?
Any Fabric trying to load?
And from what URI? (I think you will see a 404 here)

You can reference Fabric from the CDN:

//spoprod-a.akamaihd.net/files/fabric/office-ui-fabric-core/7.0.0/css/fabric.min.css

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.