這是Jerry 2021年的第 19 篇文章，也是汪子熙公衆号總共第 290 篇原創文章。
本文分别針對 SAP CRM Fiori 應用和 SAP Commerce Cloud (電商雲) UI，介紹兩個通過更改 CSS 達到更改其 UI 顯示風格的例子。
不少 SAP 産品都提供了個性化設定，允許 Key User 通過這些設定對 SAP 産品 UI 風格進行微調。下圖是 SAP Cloud for Customer 個性化設定的界面。
除了這些個性化設定外，更靈活的界面風格調整，通常采用二次開發的方式進行。
Jerry 2015年所在的 SAP 成都研究院 CRM Fiori 開發團隊，負責一個名叫 My Opportunities 的 Fiori 應用，該應用沒有采取現在流行的 Fiori Elements + CDS view 實作，而是直接采用原生的 SAP UI5 開發而成。
當時有個客戶，對 Fiori 應用 Footer 工具條裡的 Edit 按鈕的藍色背景色提出質疑，因為該客戶使用 Android 裝置通路該應用，在 Android 裝置上，任何按鈕被點選的瞬間，背景都會被藍色高亮。是以當時 SAP UI5 Edit 按鈕這個預設顯示的藍色背景色，讓客戶很難區分該按鈕是否真正被點選過。
是以客戶聯系 SAP，詢問是否能夠将該 Edit 按鈕的藍色背景色去掉，讓其和上圖右邊的 Follow Up 及 Messages 按鈕顯示風格一緻。
Jerry 接到客戶的抱怨後，分析了 SAP UI5 Footer 工具條的源代碼，發現 Edit 按鈕的藍色背景色是有意為之：按照 Fiori UX Guideline，Edit 按鈕的語義類型是 Emphasized ( 下圖第87行的代碼：sap.m.ButtonType.Emphasized)
搞清楚 Fiori 應用按鈕背景色的實作原理之後，解決方案也就不難設計了。My Opportunities 這個 CRM Fiori 應用，在其 Footer 工具條的渲染邏輯上，留了一個 extension hook ( ABAP 開發人員可以将其了解成 SAP UI5 版本的 BAdI Definition).
最後我建議客戶，實作這個 extension hook，在代碼裡将 SAP UI5 Footer 工具條标準的 Edit 按鈕删除(下圖第9行代碼)，然後在 hook 裡自行建立一個普通的按鈕 ( 第3行 ) 即可。當然這個按鈕點選之後，執行的邏輯需與删除的标準 Edit 按鈕完全一緻，是以需要給其 onBtnPressed 屬性，綁定上原始 Edit 按鈕的點選事件處理函數：onEdit ( 第5行 ).
關于這個客戶需求的更多細節，請參考我當時寫的
部落格.
看另一個舉一反三的需求：如果客戶想把 Edit 按鈕旁邊的 Follow Up 按鈕的背景色設定成紅色呢？
下面再來說說 SAP Commerce Cloud (電商雲) 的 UI 顯示風格調整。
不同于 SAP CRM Fiori 應用，SAP Commerce Cloud UI 基于開源架構 SAP Spartacus，後者使用 Angular 進行開發，并通過 core，Storefront 和 styles 這些庫檔案的方式，釋出給客戶使用。
客戶建立一個 Angular 應用，在 package.json裡導入 Spartacus 庫檔案的依賴，就可以進行 Storefront UI 的二次開發工作了。
SAP Commerce Cloud UI 這種基于 Spartacus 庫檔案的二次開發方式，使得其通過 CSS 調整 UI 風格的難度，同本文前半部分介紹的 SAP CRM Fiori 應用相比，要降低不少。
在 Partners 基于 SAP Spartacus 建立的 SAP Commerce Cloud UI Angular 應用裡，有一個自動生成的 styles.scss 檔案，裡面有一行 import 語句，導入了 SAP Spartacus 所有标準的 CSS styles：
我們可以在 styles.scss 檔案裡，對 SAP Commerce Cloud UI 的界面，按照需要進行 CSS 調整。
舉個例子：假設我想調整購物車頁面裡這行 “ORDER SUMMARY” 的外觀：
在 Chrome 開發者工具裡，找到其對應的選擇器為：cx-order-summary h4
為了減少工作量，避免對 Order Summary 和 Coupon 這兩個區域對應的選擇器，重複施加相同的 CSS 設定，我們可以将重複的 CSS 設定，定義在 %jerry-custom-div 裡(類似程式設計語言裡的宏), 然後在 cx-order-summary 和 cx-cart-coupon 裡使用 @extend 直接引用這個公用定義。