Sp-dev-docs: 🐞Broken experience with custom web parts in colored sections on modern experience pages

[StfBauer]

Category

• [ ] Question
• [ ] Typo
• [x] Bug
• [ ] Additional article idea

Expected or Desired Behavior

Web part should inherit at least background and font colour at least from the '.CanvasZoneContainer' instead of faulty overspecify styles.

Observed Behavior

Placing a web part with no styling at all lead to the following experience:

The issue is caused because .CanvasZone, .CanvasSection, .Controlzone, .ControlZoneEmphasisBackground overspecify a background color of white on each of the containers. In the end, a third party web part end up with white text on white background. The colour on the hand is not "overspecificed".

The web part, in this case, doesn't use any styling at all and just render 'Hello World'.

An intermediate fix to this issue can be accomplished with the following CSS that forces to the inheritance of 'background-color' and color properties from the '.CanvasZoneContainer' element where the "Colored Section" base properties are defined.

:global {
  .CanvasZone,
  .CanvasSection,
  .Controlzone,
  .ControlZoneEmphasisBackground {
    background-color: inherit;
    color: inherit;
  }
}

The result of this fix is a correct displayed web part.

This fix works for the 'Neural':

As well as 'Soft':

as well as 'None':

Steps to Reproduce

• Create an empty web part that does not have any style included at all.
• Place the web part on a colored section on a SharePoint Page.

[msft-github-bot]

Thank you for reporting this issue. We will be triaging your incoming issue as soon as possible.

[tdwhite0]

@StfBauer I'm noticing a weird issue with some leaking styles too, at first I thought it was something I caused but it does happen on OOB too. Not on every tenant though. Anywhere there is a tooltip hover, the background of the hover is themePrimary:

[StfBauer]

@tdwhite0 haven't seen this one.
What theme are you using and which browser?

[tdwhite0]

@StfBauer I'm still checking around, it might be a rogue tenant app customizer but its acting weird. Looks like my issue is not related to yours.

[tdwhite0]

@StfBauer Yeah, it was my fault. My bad.

[pk091990]

@StfBauer I've applied above workaround in one of my custom spfx webpart and it worked fine as it removes extra white background . However I'm using some office fabric UI components (ex. ChocieGroup ) which are not inheriting color based on section background. I've posted same issue here also https://github.com/SharePoint/sp-dev-fx-webparts/issues/786.
So do we need to individually override each component css or Microsoft will provide any permanent solution which will minimize the extra effort? Thanks !

[StfBauer]

@pk091990 Microsoft will release a permanent solution to this. The CSS above is not intended to be used. The CSS classes are just used to present possible issues that currently exist and need to be addressed in a permanent solution.

Until that happens, I would recommend not to use coloured section for third-party web parts.

[BigBd1]

I have encountered the same behavior when default client side webparts are added through PnP Template provisioning or CSOM. Here is an example with the News webpart (NewsReel type), the first one is added programmatically and the second one is added manually with the UI

At the moment, this is the only default client side webpart with which I encountered this issue.

[VesaJuvonen]

We will be releasing documentation and guidance on this area as part of the 1.8 release.

[vels-io]

Any updates on this issue?

We have been facing this on the client-side webparts. We have a dropdown on the webpart. When I changed the section background color to SharePoint's blue color, it made the title color to white but dropdown's text color remain same dark gray color.

@StfBauer recommended not to use the CSS fix he mentioned.

Any other way to resolve this?

[GuptaAnubhav]

Any update on this issue? I am still facing this issue when adding News webpart through PnP Template provisioning.

[StfBauer]

At the moment there are some gaps in the documentation yet.

@GuptaAnubhav In the case of provisioning. Have you tried to export a new version of the template and import this version again or do you use a template form before?

[GuptaAnubhav]

@StfBauer I had exported a new template yesterday and I am facing the same issue in applying the template.

[MagtheRag]

Still no fix for this?

[StfBauer]

I am currently testing this for no framework projects and ReactJS. For now no fix or updated documentation.

[StfBauer]

I published today a complete guide how to make this experience possible using just CSS - lot of changes since I opened this

Develop SPFx web parts for different section designs using CSS

[msftbot[bot]]

Issues that have been closed & had no follow-up activity for at least 7 days are automatically locked. Please refer to our wiki for more details, including how to remediate this action if you feel this was done prematurely or in error: Issue List: Our approach to locked issues