一个例子如下图所示：

```javascript
this.getView().addStyleClass(Device.system.desktop ? "sapUiSizeCompact" : "sapUiSizeCozy");
```

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

样式表以与纯 HTML 相同的方式包含在 XML 视图中。 要向 SAPUI5 控件添加更多 CSS 类，请使用 class 属性。SAP UI5 开发人员务必需要仔细选择设置样式的元素，因为 CSS 始终会影响整个页面，并且不限于视图。

例子：下面介绍如何添加样式定义并定义在 XML 视图中使用它的按钮。

```xml
<mvc:View controllerName="sap.hcm.Address" xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc"
           xmlns:html="http://www.w3.org/1999/xhtml">
   <html:style>
      .mySuperRedButton {
         color: red;
      }
   </html:style>
   <Panel>
      <Button class="mySuperRedButton" text="Press Me"/>
   </Panel>
</mvc:View>
```

注意，要允许您的 XML 视图在内容安全策略拒绝内联样式(`Content Security Policy denying inline styles`)的环境中使用（即没有 style-src 指令的 unsafe-inline 源），需要引用外部样式表而不是将样式表嵌入到其 XML 视图。

一个最直接的例子：

```javascript
myButton.addStyleClass("mySuperRedJerryButton");
```

上面的代码里，作为 `sStyleClass` 给出的字符串将被添加到该控件的根 HTML 元素的 `class` 属性中。

此方法旨在用于将控件标记为特殊类型，可以使用引用此样式类名称的 CSS 选择器为其提供特殊样式。

一个应该避免的做法是直接样式化DOM元素，这会导致不可预测的结果，因为SAPUI5不能保证内部控制DOM树的稳定性。此外，当应用程序运行在共享运行时环境(如SAP Fiori launchpad)或添加自定义HTML时，这可能会导致样式冲突。最好将样式更改限制在特定使用的CSS类中。

应该避免下面这种做法：

```css
div {
	width: 120px;
}
```

推荐的做法：

```css
.myStyleClass {
	width: 120px;
}
```

SAPUI5应用程序可以为元素创建动态id。不要在自定义CSS中使用这些id作为选择器，因为它们不是一种稳定的 id(stable id)，会随时间变化。最好是添加和使用CSS类。

不推荐的做法：

```css
#__view1__button0 {
	font-weight: bold;
}
```

推荐的做法：

```css
.myEmphasizedButton {
	font-weight: bold;
}
```

ITPub博客

使用代码给 SAP UI5 XML 视图添加自定义 CSS

最新文章