Although this method is NOT supported by Microsoft, as Joel mentioned, you can build an SPFx Extension (application customizer). Not supported because Microsoft can change the DOM and/or class name, which could break your CSS overrides. That being said it does work, but you'll want to communicate that to your client or IT management.
I recently used the Top Placeholder to drop CSS onto all modern pages. To get started, as Joel mentioned, go to Using Page Placeholders with Extensions.
In my code I was simply overriding styles, and fortunately I did not have to use any !important enforcement.
Add the .scss file to your project:
The CSS:
In your scss file, make sure everything is within :global{}, like this:
:global{
.styleToOverride{
background-color: f2f2f2;
.anotherstyleToOverride{
background-color: f9f9f9;
}
The ApplicationCustomizer.ts file:
Once you have your Top placeholder in place and working, you'll want to pull in your CSS into the placeholder. It should look something like this:
private _renderTopPlaceHolder(): void {
if (!this._topPlaceholder) {
this._topPlaceholder =
this.context.placeholderProvider.tryCreateContent(
PlaceholderName.Top,
{ onDispose: this._onDispose });
if (this._topPlaceholder.domElement) {
require("./css/customStyles.scss");
this._topPlaceholder.domElement.innerHTML = "<div></div>";
}
}
You should be able to test this by running:
gulp serve --nobrowser
Now, visit a modern page, and don't forget to add the query string to the end:
?loadSPFX=true&debugManifestsFile=https://localhost:4321/temp/manifests.js&customActions={"e5625e23-5c5a-4007-a335-e6c2c3afa485":{"location":"ClientSideExtension.ApplicationCustomizer","properties":{"testMessage":"Hello as property!"}}}
Also, don't forget to update the GUID in that query string to your solution id found in the package-solution.json file in your project. The bottom of Build a Hello World Extension shows you how to do this.
