Article
1 comment

Make your web part work with coloured page sections

This blog post is outdatedDevelop 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.

Web Part in coloured and uncoloured section

Web Part in coloured and uncoloured section

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.

Different variants of background with white border

Different variants of background with white border

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.

White text on white background

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.

First-party web part in coloured section

First-party web part in coloured section

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.

Fixed web part without white border

Fixed web part without white border

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.

Updated hello world web part

Updated hello world web part

1 Comment so far

  1. 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?

    Reply

Leave a Reply

Required fields are marked *.


This site uses Akismet to reduce spam. Learn how your comment data is processed.