Friday, August 19, 2016

Overriding default styles in a SharePoint Framework project

image

I’m building something using the pre-release of SPFx and by default when you start a project you have a SASS scss file for styles named something like MyPart.module.scss. This is all fine. Say you create a class:.myClass {}

This will be bundled and prefixed for you to be unique when you run the web part, like this: .myClass_e90cb14c

But what if you don’t want class names to be prefixed? In my case I needed to overload some styles coming from a component I’m not controlling. It’s actually very very very easy. I added a normal .css file to my project and at the top of the .cscc file I added the good ‘ol import statement like this:

@import url('MyPart.override.css');

The imported file will be included just fine, just not prefixed like the ones in the scss file.

(Thanks to the Kimzter for hinting I should try this)

1 comment:

  1. Thanks Mikael, I found this helpful recently when I was trying to override the positioning of the office-ui-fabric panel I was using in my component.

    ReplyDelete