0

I have 2 webpart, each webparts loads its own css files. If I load individual webpart to page it works fine, but after I added other webpart, styles broken badly.

It makes sense since each css file apply diffirent rules for html elements.

Bu I need each webpart affected by only its own css files. how can achieve it?

webpart1;

export default class webpart1 extends BaseClientSideWebPart<Iwebpart1> {
  public constructor() {
    super();
    SPComponentLoader.loadCss('mystyle1.css');

webpart2:

export default class webpart2 extends BaseClientSideWebPart<Iwebpart2> {
  public constructor() {
    super();
    SPComponentLoader.loadCss('mystyle2.css');

Each of webparts looks fine, but if I added both of them in a page css mess up

1

Encapsulate each webpart with a div element and then update the styles so it get applied to the inner elements of the div

<div id="webpartwrapper1">
    ..webpart 1 content goes here..
</div>

In CSS you can use

#webpartwrapper1 stylename {
    ... style ...
}
|improve this answer|||||
  • but I have external css file, so do you advice copy entire stylesheets and paste into "#webpartwrapper1 stylename" ? – TyForHelpDude Feb 9 '17 at 13:21
  • 1
    No in the external stylesheets target the styles to elements inside the wrapper div. – Amal Hashim Feb 9 '17 at 13:22
  • hmm makes sense let me try it – TyForHelpDude Feb 9 '17 at 13:30
  • what is "stylename" there? I scapoed all styles in #webpartwrapper1 and give it as id to parent div, page unable to use these styles, "#webpartwrapper1{ ...}" I thought stylename unnecessary there.. but something wrong that cause this issue ?> – TyForHelpDude Feb 9 '17 at 14:34
  • Please read on how to target elements and subelements in CSS - stackoverflow.com/questions/18670014/… – Amal Hashim Feb 9 '17 at 14:40
1

This issue is going to be a commonplace occurrence as more and more SPFx webpart start getting developed. So I suggest that you take a look at Disable auto-renaming on web parts. Stefan Bauer has shared this link How to handle automatic CSS class renaming in SPFx and related Github code sample spfx autorenaming styles.

What it says - Normally, in your css file,you tend to define your styles as below:

.mywebpart{
    /* Styles of my web part */
}

.headline{
    /* Styles of my headline */
}

.content{
    /* Styles of content */
}

The problem with this approach is that the class definitions are global scoped. This means that you overwrite other definitions that might use in other web parts.With a slightly structural change, especially with SASS, all style definitions can be scoped to the web part container. Styles outside of that web part won’t be affected as below:

/* Global definition of web part */
.mywebpart{
    /* Styles of my web part */

    /* Local Style of headlines */
    .headline{
    }

    /* Local Style of content */    
    .content{
    }

    /* Local Style of content */    
    .image{
    }

}

Please take a look at the above blog and the shared git repo. Right now the git repo is working on SPFx drop 6 so might not work with SPFx RC0. But its a great read on the issue you are facing.

Web Part Sample - prefixed styles

|improve this answer|||||
  • FYI/sidenote If you only use one SPFx webPart as a wrapper around W3C standard WebComponents you don't have these problems as CSS is scoped., And you get the benefit of not having to built your SPFx WP over and over again .. and your WebComponents work without SPFx..even in SP2010, SP2013, 16, Classic... It is like .. well, not even like.. it is your team only developing in JSFiddles (or CodePen or whatever) and all SPFx does is help put it together on one page in SharePoint... – Danny '365CSI' Engelman Feb 9 '17 at 12:23
  • Thanks Guatam, I already read it but its significantly diffirent from RC.0 version. But the base logic is same as you said. – TyForHelpDude Feb 9 '17 at 13:32

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.