SharePoint Framework (GA): how to prevent rewriting of CSS class names?

Question

SharePoint Framework currently takes my .scss files and changes all class names by adding IDs like this: floatRight_789b4d6f. I understand this is done to isolate the styling within the web part but it messes up styling where I don't control the CSS.

Let's say I'm using an external JavaScript library that generates HTML as well as specific CSS class names (I don't control these). I need to style these elements and therefor cannot use the "mangled" class names the SharePoint Framework gives me. I need to use exactly the class names as they are generated by the external library (so floatRightfor the above sample).

Sample

HTML generated by external library:

<div class="floatRight">...</div>

Good. I need to style the floatRight class.

This is in my scss file:

.floatRight {
    float: right;
    margin-left: 10px;
}

But this is generated in the scss.ts file:

const styles = {
  floatRight: 'floatRight_789b4d6f'
};

And my style is not applied to the element.

Question

How to get rid of the IDs? How can I disable this class name rewriting for certain .scss files? Or is there an alternative approach that is recommended here?

Answer 1

Try wrapping your CSS in a :global block like this:

:global {
    .floatRight {
        float: right;
        margin-left: 10px;
    }
}

Answer 2

Update 1: Remove the ".module" from your file name to disable rewriting of CSS class names.

See here for details: http://www.n8d.at/blog/how-to-handle-automatic-css-class-renaming-in-spfx/

Update 2: There is now official documentation about these so-called "CSS modules" and the .module extension: https://dev.office.com/sharepoint/docs/spfx/css-recommendations#use-css-modules-to-avoid-styling-conflicts

---

The solution for me was to add a new scss file to my project. The styles from this new scss file are not extended with IDs.

The (complete) generated scss.ts file looks like this:

/* tslint:disable */
require('./NameOfMyFile.css');

/* tslint:enable */

That's it. No styles variable. No IDs.

I include the style file in my view model like this:

require('./NameOfMyFile.scss');

All good.

Answer 3

You can use the SPComponentLoader.loadCss method to load your external css files.

Add the below import statement:

import { SPComponentLoader } from '@microsoft/sp-loader';

After that in your constructor, you can use it as below:

public constructor() {
 super();    
 SPComponentLoader.loadCss('https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css');
}

This will load the css as it is and you can use the class names that are provided by the external library.