SPFx web part's CSS applies to it but not to rest of page?

Question

(SharePoint online, SPFx, modern website)

My end goal is this :

• I want to customize some visual aspects of a SharePoint page (title, left nav bar, fonts, etc.)
• I want it to happen only on one page

The solution I chose for that was to create a SPFx web part, as opposed to an extension, which I believe would apply to the entire site. I'm simply going to put the web part on that one page and be done with it.

My issue is :

• The CSS gets applied properly to the part of the DOM that represents my web part
• the CSS does NOT seem to be applied (at all) to anything else from the page.

For example, I don't see this take effect or even appearing at all in the rendered page :

  #spLeftNav {
    color: red !important;
  }

However, this works as expected :

.myWebPartFooBar {
     .container {
        color:red !important;
     }
}

Question : Is there some sort of sanitation mechanism that I'm missing? Does SharePoint intercept that CSS and prevent it from being applied to anything outside of my web part? I don't see any trace of such protection system in online literature but maybe it's common knowledge.

Answer 1

I had similar problem. The problem is that if you are using scss, compiler translates those css tags #spLeftNav into custom webpart only tags to prevent css mismatch on entire site.

To override it put those global css tag in global variable (this will prevent compiler to change it).

My example of "global css":

:global {
#O365_MainLink_Help {
    display:none;
    visibility:hidden;
}
.InfoPane-section.InfoPaneSection--properties {
    display: none;
}
.o365cs-nav-bposLogo .o365cs-nav-brandingText {
    display: none;
}
.o365cs-base.o365cs-topnavBGColor-2 {
    background-color: #17375e !important;
}
.o365cs-base .o365cs-nav-rightMenus {
    background-color: #17375e !important;
}
#spPageChromeAppDiv,
.ms-Nav
{
    background-color: #eeece1 !important;
}
.ms-FocusZone .ms-Nav {
    top: 0px !important;
}
#O365_NavHeader button#O365_MainLink_NavMenu,
#O365_NavHeader button#O365_MainLink_NavMenu_Responsive,
.o365button .o365cs-nav-brandingText,
.ms-searchux-searchbox {
    display: none !important;
}
.CanvasZone:not(.CanvasZone--fullWidth) .ControlZone {
    padding: 0px !important;
}
input:not([type]), input[type=email], input[type=file], input[type=password], input[type=text], select, textarea {
    background-color: #eeece1 !important;
    border-color: #c8c8c8 !important;
    color: #17375e !important;
}
.ms-CommandBarItem-link[disabled] i,
.ms-CommandBarItem-link[disabled] span 
{
    color: unset !important;
}
.ms-compositeHeader-mainLayout {
    height: 77px;
}
div[class^='commentsWrapper_'] {
    display: none;
}
span.ms-siteHeader-siteName {
    white-space: normal !important;
}
.ControlZone {
    margin-top: 0px !important;
}
.ControlZone-control,
.ms-SearchBox,
.ms-BasePicker,
.ms-SearchBox-field {
    background-color: #eeece1 !important;
}
.commandBarWrapper .ms-CommandBar {
    display: none;
}
.ms-compositeHeader {
    padding: 0 32px 0px;
}

}