一個例子如下圖所示：

```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
<view controllername="sap.hcm.Address" xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc" xmlns:html="http://www.w3.org/1999/xhtml">
   <style>
      .mySuperRedButton {
         color: red;
      }
   </style>
   <panel>
      <button class="mySuperRedButton" text="Press Me"></button>
   </panel>
</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;
}
```

使用程式碼給 SAP UI5 XML 檢視新增自定義 CSS

相關文章