我做 SAP UI5 開發時遇到一個問題：

![](https://img-blog.csdnimg.cn/img_convert/65c4dc9f140524d3f3a0a61a178470ed.png)

我在 XML 檢視裡，給 Button 控制元件分配了一個 CSS class：

sapUiSmallMarginEnd

期望執行時，該 CSS 類能夠產生 1 rem 的 margin 效果：
![](https://img-blog.csdnimg.cn/img_convert/7f70c973aba55eb356c889abbee456c2.png)

上圖來自 SAP UI5 官網的例子。

然而，我的例子執行出來失敗了，我的 button 控制元件渲染出的 HTML 原生程式碼，並沒有出現這個 CSS 類，我期望的 margin 效果並沒有實現：
![](https://img-blog.csdnimg.cn/img_convert/8209a7300351a503ed8c07da33054957.png)

![](https://img-blog.csdnimg.cn/img_convert/96f3b8d7ff474b187e56a209762692b3.png)

這個 class 儲存在 aCustomStyleClasses 陣列裡：
![](https://img-blog.csdnimg.cn/img_convert/06b7ba38816515f7b5dd1b02cbd6202f.png)

在 XMLTemplateProcessor 裡處理自定義 CSS：
![](https://img-blog.csdnimg.cn/img_convert/43b919e8f4b330f8c70e18fb3f3c3909.png)

![](https://img-blog.csdnimg.cn/img_convert/0a0e202b1cf01aa9c7340494c5234f17.png)

自定義 class 在此處被寫入：334 行
![](https://img-blog.csdnimg.cn/img_convert/c3aa5d8d15b7b8b3e69f16e14b4f9a81.png)

511行：
![](https://img-blog.csdnimg.cn/img_convert/5f79b9f7d389510a647768973ce42107.png)

buttonRender.js 的第 130 行：

![](https://img-blog.csdnimg.cn/img_convert/c53260879059f5c0c00006897e2aa751.png)

我的例子裡，並沒有解析出 aCustomClasses

![](https://img-blog.csdnimg.cn/img_convert/141c93ccff4474c327949fee397e4b15.png)

![](https://img-blog.csdnimg.cn/img_convert/b10c724c68eb01de9b711b16b483896b.png)

回到我的程式碼，除錯 1450行，為什麼 CSSStyle 沒有新增到 button 裡：

![](https://img-blog.csdnimg.cn/img_convert/cbd6492a1536ab6a92005ff3b78abfc6.png)

8081 即 SAP 例子裡，sStyleClasses 能夠成功被解析出來：

![](https://img-blog.csdnimg.cn/img_convert/013ac90983d435c5451a05b8b0b5f9ec.png)

但我的不行：
![](https://img-blog.csdnimg.cn/img_convert/43fe6c2041fd07fb45bc8ed4e7e5376f.png)

解析 CSS：
![](https://img-blog.csdnimg.cn/img_convert/e4fb7d009789ebaec468d8a7284dc3af.png)

SAP UI5 CSS 類 sapUiSmallMarginEnd 的工作和新增原理

相關文章