率这个职位

在SharePoint现代体验中缺少内容编辑器Web部件(cwep)或脚本编辑器Web部件,高级用户有根据他们的需求设计页面样式的挑战。

唯一的方法是创建一个自定义SPFx组件,该组件可以将自定义css添加到页面上。就是这样! !简单的对吧。但是怎么做呢?在这个博客中,我们将看到相同的步骤,也是链接(带步骤),以方便建立它。

这增加了管理自定义组件的开销,但组件的简单性将所有支持放在外部CSS上,而不是webpart本身,很容易维护。换言之,这意味着webpart只是将自定义CSS添加到页面中,CSS完成了所有的工作。

注意:定制的CSS并不能像早期的脚本编辑器或CWEP那样解决所有的方案,但是仍然可以做样式部分,并解决许多对齐问题。另一个注意,将自定义内联javascript应用到页面有其挑战,但不起作用。我们将在另一个博客中讨论不使用自定义脚本的原因,但目前的建议是不要使用自定义脚本。

使用来自Repo的代码进行部署

GIT回购协议

对于那些想要直接获取代码或者从,这是链接回购。使用它的步骤很简单,如下所示。

1.克隆回购或下载解决方案

2。在Visual Studio代码中打开文件夹

3.然后,与任何克隆代码一样,执行以下操作,

清洗npm安装gulp构建

4.如果上述操作没有导致任何构建错误,然后执行步骤7,否则转到步骤5

5.修正代码中的任何错误

6.使用Gulp-Service测试代码。打开工作台并使用属性窗格测试自定义CSS。有关详细信息,请参见下面的步骤x。

杯服务

7.使用吞咽船部署资产。

杯——船

8.包装解决方案

大口包装解决方案——装运

9.转到Code文件夹并迁移到SharePoint/sources,找到sppkg文件。

10。将sppkg文件部署到站点或租户应用程序目录的应用程序目录中。有关如何启用站点集合应用程序目录的详细信息,请单击此处。

11.将应用程序添加到站点

12.将web部分添加到页面中。

13。编辑web部件并从属性窗格中提供CSS类路径。

CSSExtenderWebPartProps

14.应用更改。css应该反映在站点上。

构建自己的CSS实现者

如果您对从回购中复制代码并自己编写代码不感兴趣,可以按照以下步骤进行。代码并不复杂,所以创建它的方式很简单。

1.使用yeoman创建SPFx webpart。建议使用SPFx 1.4或更高版本。

2。添加一个属性来读取CSS路径。

3.接下来,从components文件夹中打开.tsx文件。并添加SPComponentLoader(组件加载程序)@microsoft / sp-loader类

4.下一次使用spcomponentloader.loadcss()。方法将自定义CSS应用于页面。下面的示例代码

public render():react.reactElement if(this.props.pathtocssfile!=“”“)spcomponentloader.loadcss(this.props.pathtocssfile);}

5.大口服务和测试Web部件

就是这样!!

按照上面repo部分中的步骤将web部件部署到应用程序目录。

结论

在本博客中,我们了解了如何使用一些快速SPFx脚本在页面上实现自定义css。

编码快乐! !

类别:
应用程序开发和集成, 沟通与协作, 办公室365, SharePoint
标签:
, , , ,

留下一个回复

留下一个回复

订阅
通知的
跟着我们!

克劳德解决方案博客-关注我们!