This blog post is outdated – Develop SPFx web parts for different section designs using CSS
When you put your custom web part in a coloured page section in SharePoint, you might have recognised that there is a white border around the web part.
So you haven’t specified a white background in your web part but where does this background is originated. It is hardly noticeable on sections that don’t use the full colour but only a slightly dimmed version, but the white background is there as well.
You might argue that gets caused by the background of the “HelloWorld” container, but when you remove the background, the result is white text on white background.
It is again not a convenient solution at least when you like to show content.
The issue, bug or inconvenient behaviour origin
While first-party web parts do not show this behaviour, and they can manage the coloured background pretty well.
Third party web parts have this issue. The reason is that the core rendering of web parts is different in many ways and especially in one specific class.
This class is named ControlZoneEmphasisBackground
rendered only by custom web parts but not the default web parts. On a web part, this class makes sure that every web part has fixed white background. It is out of reach from a custom web part CSS.
Is this global CSS class really out of reach? No, not really. The default behaviour is that CSS gets scoped to the web part. A good behaviour overall because it makes sure that no CSS gets applied outside of the web part causing trouble and usability issues.
The tool responsive for that is named CSS Modules. It gives you better management not only to scope CSS to a component. On a page also allows you to access global CSS definitions outside of the ‘local’ scope — possibly made through the ‘global’ pseudo-class. I already explained this in another blog post on how to make your web part responsive to the parent container
The Solution
To fix the background define in your web part the following style definition.
:global {
.ControlZoneEmphasisBackground {
background-color: transparent;
}
}
The negative or positive side effect is, however you like to see it, the definition gets applied to all containers. Can cause maybe unwanted side effects for other web parts.
In general, it should in e applied to any web part. You can never be sure if not another web part fixes this for you already. So, better safe than sorry.
This small modification makes sure the white border s not applied on the web parts.
Final tip
Do not mess around with background and font colour in your web part unless you know what your background and foreground colour are.
In the case of the “HelloWorld” web part, it means that I have to remove all foreground and background definition. After that, the web part looked like this.
Hi Stefan,
I implemented this idea about a year ago and it has been working fine until the last couple of days.
I can make it work again by replacing
:global .ControlZone--<b>emphasisBackground </b>{ background: transparent; }
with
:global .ControlZone--<b>control </b>{ background: transparent; }
Has this also broken lately in your experience?