SPFx Web 部件的 CSS 适用于它但不适用于页面的其余部分？

如何解决SPFx Web 部件的 CSS 适用于它但不适用于页面的其余部分？

（SharePoint 在线、SPFx、现代网站）

我的最终目标是：

• 我想自定义 SharePoint 页面的一些视觉方面（标题、左侧导航栏、字体等）
• 我希望它只发生在一页上

我为此选择的解决方案是创建一个 SPFx Web 部件，而不是扩展，我相信它适用于整个 em> 网站。我只是将 Web 部件放在那个页面上并完成它。

我的问题是：

• CSS 正确应用于代表我的 Web 部件的 DOM 部分
• CSS 似乎（根本）没有应用于页面中的任何其他内容。

例如，我没有看到这个生效，甚至根本没有出现在呈现的页面中：

  #spLeftNav {
    color: red !important;
  }

但是，这按预期工作：

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

问题：我是否缺少某种清理机制？SharePoint 是否会拦截该 CSS 并阻止其应用于我的 Web 部件之外的任何内容？我在网络文学中没有看到任何此类保护系统的踪迹，但也许这是常识。

解决方法

我遇到了类似的问题。问题是，如果您使用 scss，编译器会将这些 css 标签 #spLeftNav 转换为自定义 webpart 标签，以防止整个网站上的 css 不匹配。

要覆盖它，请将这些全局 css 标记放在全局变量中（这将阻止编译器更改它）。

我的“全局 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;
}

}