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

Question

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

我的最终目标是：

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

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

我的问题是：

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

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

  #spLeftNav {
    color: red !important;
  }

但是，这按预期工作：

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

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

Answer 1

我有类似的问题。问题是，如果您使用的是 scss，编译器会将这些 css 标签 #spLeftNav 转换为自定义 webpart only 标签，以防止整个网站上的 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;
}

}