3

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: enter image description here

5

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';
}
  1. In your topmost root component add the import:
import "./materialize-custom.scss";
  1. 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:

enter image description here

Also, check out how materialize selectors were transformed:

enter image description here

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

  • This seems like a bulletproof method! Thank you :) – BennKingy Dec 11 '19 at 19:19
  • Interesting! I didn't know about adding imports nested inside other classes. – Dylan Cristy Dec 11 '19 at 19:56
  • Implemented this today works like a charm :) – BennKingy Dec 12 '19 at 13:45
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.

  • That clears it up for me thank you :) – BennKingy Dec 11 '19 at 16:53

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.