4

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?

3 Answers 3

3

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

:global {
    .floatRight {
        float: right;
        margin-left: 10px;
    }
}
2
  • That did the trick! Is there documentation on this somewhere you can point me to? Just want to understand if this will have any downstream effects
    – sigmapi13
    Commented Nov 17, 2020 at 17:52
  • 1
    Sorry, I haven't been in this space for a few years now. Looking at the other answers, it appears that the framework is using CSS modules. I do see mentions of :global in the CSS modules repo (github.com/css-modules/css-modules). Hope that helps! Commented Nov 20, 2020 at 5:17
3

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.

1
  • That wormks great! Thanks. Way easier than loading from a cdn
    – RussGove
    Commented Oct 20, 2017 at 14:51
1

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.

3
  • The CSS file will be part of my bundle. Is this method applicable for CSS files contained in the (webpack) bundle? Commented Mar 14, 2017 at 10:27
  • Yes i think it should work. Just ensure that css path is valid. Commented Mar 14, 2017 at 10:50
  • It does not seem to work for modules, or some additional action is required to add CSS files as modules :-/ Commented Mar 21, 2017 at 15:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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