🐞Broken experience with custom web parts in colored sections on modern experience pages

[StfBauer]

Category

• Question
• Typo
• 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 pnp/sp-dev-fx-webparts#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.