SPFX web part, CSS is leaking into the whole sharepoint site

Question

I am creating a web part, and I wanted to use the Materialize CSS library so I didn't have to write much CSS.

However I have noticed the CSS is spilling out onto the whole SharePoint page and not being contained within the web part its self.

Any idea where I am going wrong/how to stop this happening?

Code:

export default class KWebPart extends BaseClientSideWebPart<IKWebPartProps> {

  constructor() {
    super();
    SPComponentLoader.loadCss('//cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css');
  }

}

Proof of leaking:

Answer 1

There is a way to avoid this situation in a slightly better way. You don't know how third party css library might affect other SharePoint components. That's why if your library has sass sources, you can compile it in such a way, that it reacts only to certain css classes.

How to do that based on the materialize:

1. Install materialize - npm install materialize-css --save
2. In a folder with your topmost (root) component add a file materialize-custom.scss with below content:

.my-app {
  @import 'node_modules/materialize-css/sass/materialize.scss';
}

3. In your topmost root component add the import:

import "./materialize-custom.scss";

4. Write your code, if you want to use materialize styles, just put them inside an element with my-app class.

For example below code (React)

<div>
    <div className="my-app">
      <p>Styled button:</p>
      <a className="waves-effect waves-light btn">button</a>
    </div>
    <br />
    <div>
      <p>Just a link, because "my-app" class is missing in a parent div</p>
      <a className="waves-effect waves-light btn">button</a>
    </div>
</div>

Produces:

Also, check out how materialize selectors were transformed:

So simply put your custom html elements inside a div with my-app class and you're good. That way you can avoid accidentally changing default SharePoint components.

More info here

Answer 2

Unfortunately, no, there is no real way to keep that from leaking out. The problem is, when you use a styling library like that, it's going to have some very broad selectors included, and those are possibly going to affect certain things on the page, unless SharePoint's built in CSS has selectors that are more specific and therefore override the library.

For instance, I recently used Semantic UI React for some stuff, and Semantic UI has a selector/rule of

*, :before, :after {
  box-sizing: inherit;
}

which, obviously, is wildly broad, and it made the SharePoint content area float up a bit and overlap the bottom of the title area.

What you are going to have to do is find the stuff from the library that is leaking out, and include some extra CSS in your webpart to override the styling library.

In my case, I had to add

div#contentRow, div#s4-titlerow {
  box-sizing: content-box !important;
}

in order to counteract the effects of the Semantic UI CSS.