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

Posted 2023-03-27

【中文标题】SPFx Web 部件的 CSS 适用于它但不适用于页面的其余部分？

【英文标题】：SPFx web part's CSS applies to it but not to rest of page?

【发布时间】：2021-09-13 11:19:56

【问题描述】：

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

我的最终目标是：

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

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

我的问题是：

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

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

  #spLeftNav 
    color: red !important;
  

但是，这按预期工作：

.myWebPartFooBar 
     .container 
        color:red !important;
     

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

【参考方案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;