笔者在日常工作中曾经负责过一些企业级 Web 应用的负责和开发，也曾经指导过一些客户的二次开发人员，通过各种方式对我们发布的企业级 Web 应用进行一些定制开发。

所谓企业级前端应用，是指为大型企业或组织开发的前端应用，这些应用具有超过一般 2C 软件的技术复杂度，高度定制化和可扩展性，因为企业级前端应用程序，通常需要满足企业特定的业务需求和技术要求，因此除了实现业务需求之外，还必须具备强大的性能、可扩展性、安全性和可维护性。在企业级前端开发中，开发者需要面对大规模数据处理、复杂的业务逻辑、多模块协同工作等挑战。

回到本文标题描述的需求，从实现技术复杂度上来看，最简单直接的界面定制方式，就是通过 CSS 的修改，来调整 Web 应用的 UI 外观。

本文介绍笔者日常工作中积累的一些通过操作 CSS 文件来实现 Web 应用界面调整需求的实际例子。

下图是笔者团队负责的一个名叫 My Opportunities 的 Fiori 应用，该应用没有采取现在流行的 Fiori Elements + CDS view 实现，而是直接采用原生的 UI5 开发而成。

当时有个客户，对 Fiori 应用 Footer 工具条里的 Edit 按钮的蓝色背景色提出质疑，因为该客户使用 Android 设备访问该应用，在 Android 设备上，任何按钮被点击的瞬间，背景都会被蓝色高亮。因此当时 UI5 Edit 按钮这个默认显示的蓝色背景色，让客户很难区分该按钮是否真正被点击过。

因此客户联系我们团队，询问是否能够将该 Edit 按钮的蓝色背景色去掉，让其和上图右边的 Follow Up 及 Messages 按钮显示风格一致。

我接到客户的抱怨后，分析了 UI5 Footer 工具条的源代码，发现 Edit 按钮的蓝色背景色是有意为之：按照 Fiori UX Guideline，Edit 按钮的语义类型是 Emphasized ( 下图第87行的代码： .m.ButtonType.Emphasized)

而在 UI5 标准的 CSS 文件里，Emphasized 类型的按钮，背景色被设置为深蓝色。如下图 Chrome 开发者工具截图所示：

搞清楚 Fiori 应用按钮背景色的实现原理之后，解决方案也就不难设计了。My Opportunities 这个 CRM Fiori 应用，在其 Footer 工具条的渲染逻辑上，留了一个 extension hook ( ABAP 开发人员可以将其理解成 UI5 版本的 BAdI Definition).

最后我建议客户，实现这个 extension hook，在代码里将 UI5 Footer 工具条标准的 Edit 按钮删除(下图第9行代码)，然后在 hook 里自行创建一个普通的按钮 ( 第3行 ) 即可。当然这个按钮点击之后，执行的逻辑需与删除的标准 Edit 按钮完全一致，因此需要给其 onBtnPressed 属性，绑定上原始 Edit 按钮的点击事件处理函数：onEdit ( 第5行 ).

最后的效果：Edit 的高亮背景色消失了，客户很满意。

看另一个举一反三的需求：如果客户想把 Edit 按钮旁边的 Follow Up 按钮的背景色设置成红色呢？

解决方案：在 UI5 增强项目代码里，重新实现 UI5 onAfterRendering hook, 找到 Follow Up 按钮的引用 ( 下图第二行 oButtonListHelper.aButtons 数组里，包含了 Footer 工具条里所有按钮，数组索引为1的元素即 Follow Up 按钮 ), 然后给其添加一个新的 CSS 类：jerryButton.

这个自定义的 CSS 类 jerryButton，嵌入在增强的 XML View 里，或者定义在增强项目自定义的 CSS 文件里均可。

最后的运行时效果：

下面再来说说 Spartacus UI 显示风格调整。

Spartacus 使用 Angular 进行开发，并通过 core，Storefront 和 styles 这些库文件的方式，发布给客户使用。

客户新建一个 Angular 应用，在 package.json里导入 Spartacus 库文件的依赖，就可以进行 Storefront UI 的二次开发工作了。

Commerce Cloud UI 这种基于 Spartacus 库文件的二次开发方式，使得其通过 CSS 调整 UI 风格的难度，同本文前半部分介绍的 CRM Fiori 应用相比，要降低不少。

在 Partners 基于 Spartacus 创建的 Commerce Cloud UI Angular 应用里，有一个自动生成的 styles.scss 文件，里面有一行 import 语句，导入了 Spartacus 所有标准的 CSS styles：

我们可以在 styles.scss 文件里，对 Commerce Cloud UI 的界面，按照需要进行 CSS 调整。

举个例子：假设我想调整购物车页面里这行 “ORDER SUMMARY” 的外观：

在 Chrome 开发者工具里，找到其对应的选择器为：cx-order-summary h4

然后在 styles.scss 里使用该选择器，覆盖掉 Spartacus styles 库里的原始设置即可：

最后运行时的效果：

假设我想把下图 Order Summary 和 Coupon 页面的文本颜色变成绿色，字体加粗：

为了减少工作量，避免对 Order Summary 和 Coupon 这两个区域对应的选择器，重复施加相同的 CSS 设置，我们可以将重复的 CSS 设置，定义在 %jerry-custom-div 里(类似编程语言里的宏), 然后在 cx-order-summary 和 cx-cart-coupon 里使用 @extend 直接引用这个公用定义。

最后的运行时效果：

总结

本文介绍了两种基于 UI5 和 Angular 开发的企业级前端应用里，如何通过调整 CSS 来实现客户的页面定制化需求，希望对工作于类似需求的同事有所启发。