(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.