Style SPFx workbench

This blog post does not contain anything amazing or new. But it’s something I use for a very long time and decided to write it down to hopefully help someone. Style the SPFx workbench page.

Note: I have since created a workbench customizer web part that you can just add to the workbench page. You can read more here. And you can find the web part here.

The SPFx Workbench page is fantastic. You can use the local version to run your code locally, or you can use the online hosted version to test your code against your site. But it has some limitations.
One of the limitations I often find is related to the maximum width. This is mainly a problem with web parts that need to be able to adapt to wider web part zones. The Workbench page is set to have a max-width of 924px by default on one of the top page elements, preventing the middle area of the page from expanding.
But as we are talking about CSS, it can be easily fixed with more CSS.

The :global prefix

When the SPFx build tools generate CSS classes from your SASS files, it changes the name of the classes to make them unique and ensure that you do not override any CSS class already on the page with that name. But what if you want to override CSS? (Please don’t do it on normal pages as it’s not recommended!)
In that case, you can make use of the :global attribute. By prefixing your styles with :global, you can ensure that they will not be renamed by the build tools.

You can take advantage of this attribute to change the styles of the Workbench page. This is only a page targeted for developers, so it’s not the end of the world if the OOB styles are changed and your overrides break. You can just update them and fix the issue if that ever happens.

The following snippet allows you to control the max width of the page, by overriding the default 929px value applied to that element.

:global #workbenchPageContent {
    max-width: 1284px;
}

But the above is only an example. You can have a look around and override other styles if that makes sense for your case. Just make sure you do so in a way that your CSS overrides don’t get applied to other pages when your web part is deployed.