SPFx Web 部件的 CSS 適用於它但不適用於頁面的其余部分？

Question

（SharePoint Online、SPFx、現代網站）

我的最終目標是：

• 我想自定義 SharePoint 頁面的一些視覺方面（標題、左側導航欄、字體等）
• 我希望它只發生在一頁上

我為此選擇的解決方案是創建一個 SPFx Web 部件，而不是擴展名，我相信它會應用於整個站點。 我只是將 web 部件放在那個頁面上並完成它。

我的問題是：

• CSS 已正確應用於代表我的 Web 部件的 DOM 部分
• CSS 似乎（根本）沒有應用於頁面中的任何其他內容。

例如，我沒有看到這在渲染頁面中生效，甚至根本沒有出現：

  #spLeftNav {
    color: red !important;
  }

但是，這按預期工作：

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

問題：是否有某種我缺少的衛生機制？ SharePoint 是否會攔截該 CSS 並阻止其應用於 Web 部件之外的任何內容？ 我在網絡文學中沒有看到任何此類保護系統的痕跡，但也許這是常識。

Answer 1

我有類似的問題。 問題是，如果您使用 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;
}

}