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

Question

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

我的最终目标是：

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

我为此选择的解决方案是创建一个 SPFx Web 部件， 而不是扩展，我认为后者适用整个站点。我只是将 Web 部件放在 那一页 上，然后就完成了。

我的问题是：

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

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

  #spLeftNav {
    color: red !important;
  }

但是，这按预期工作：

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

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

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;
}

}

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

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

web-parts

sharepoint-online

spfx