修改SPFx Web Part实现引用CSS文件替代内联CSS代码咨询

实现方案 #

你只需要按以下步骤修改现有代码即可完成改造： #

1. 修改WebPart属性定义与属性面板控件（修改EnhancedListFormattingWebPart.ts文件）

将原本用于存储CSS代码的字段调整为存储CSS文件路径，把Monaco代码编辑器替换为普通文本输入框：

• 原有属性接口可以直接沿用（如果想语义更清晰也可以把css字段重命名为cssFileUrl，这里先沿用原有字段减少修改量）：

export interface IEnhancedListFormattingWebPartProps {
  css: string;
  acceptedDisclaimer?: boolean;
}

• 在顶部导入内置的文本框控件：

import {
  IPropertyPaneConfiguration,
  PropertyPaneTextField
} from '@microsoft/sp-property-pane';

• 替换getPropertyPaneConfiguration方法中原来的Monaco编辑器配置：

// 删掉原有的PropertyFieldMonacoEditor配置，替换为以下内容
PropertyPaneTextField('css', {
  label: strings.CSSFieldLabel,
  value: this.properties.css,
  placeholder: "请输入CSS文件完整URL，例如https://你的租户.sharepoint.com/站点名/站点Assets/custom.css"
}),

不再使用的PropertyFieldMonacoEditor相关导入和代码可以直接删除。 #

2. 修改组件渲染逻辑（修改EnhancedListFormatting.tsx文件）

将原本插入CSS代码到style标签的逻辑，改为动态创建link标签加载外部CSS文件：

// 删掉原来的styleElem生成逻辑，替换为以下内容
const hasCssUrl: boolean = css?.trim().length > 0;
const cssLinkElem: JSX.Element | null = hasCssUrl ? (
  <link 
    rel="stylesheet" 
    type="text/css" 
    href={css.trim()}
    crossOrigin="anonymous"
  />
) : null;

再把代码中所有用到styleElem和hasCSS的地方，分别替换为cssLinkElem和hasCssUrl即可。 #

3. 可选优化

如果需要支持同时引用多个CSS文件，可以把文本框调整为允许多行输入，每行填写一个CSS地址，然后循环生成多个link标签即可；也可以增加简单的路径校验逻辑，判断输入的地址是否以.css结尾，避免无效配置。 #

注意事项

• 存放CSS文件的位置需要给所有访问页面的用户开放至少只读权限，推荐存储在站点的「样式资源库」或「站点资产」库中
• CSS文件路径优先使用绝对路径，避免相对路径在不同页面层级加载出错

内容的提问来源于stack exchange，提问作者John John