我做 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)

ITPub博客

SAP UI5 CSS 类 sapUiSmallMarginEnd 的工作和添加原理

最新文章