一個例子如下圖所示：

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

樣式表以與純 HTML 相同的方式包含在 XML 視圖中。 要向 SAPUI5 控件添加更多 CSS 類,，請使用 class 屬性,。SAP UI5 開發(fā)人員務(wù)必需要仔細(xì)選擇設(shè)置樣式的元素，因為 CSS 始終會影響整個頁面,，并且不限于視圖,。

例子：下面介紹如何添加樣式定義并定義在 XML 視圖中使用它的按鈕。

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

注意,，要允許您的 XML 視圖在內(nèi)容安全策略拒絕內(nèi)聯(lián)樣式(Content Security Policy denying inline styles)的環(huán)境中使用（即沒有 style-src 指令的 unsafe-inline 源）,，需要引用外部樣式表而不是將樣式表嵌入到其 XML 視圖。

一個最直接的例子：

myButton.addStyleClass("mySuperRedJerryButton");

上面的代碼里,，作為 sStyleClass 給出的字符串將被添加到該控件的根 HTML 元素的 class 屬性中,。

此方法旨在用于將控件標(biāo)記為特殊類型，可以使用引用此樣式類名稱的 CSS 選擇器為其提供特殊樣式,。

一個應(yīng)該避免的做法是直接樣式化DOM元素,，這會導(dǎo)致不可預(yù)測的結(jié)果，因為SAPUI5不能保證內(nèi)部控制DOM樹的穩(wěn)定性,。此外,，當(dāng)應(yīng)用程序運行在共享運行時環(huán)境(如SAP Fiori launchpad)或添加自定義HTML時,，這可能會導(dǎo)致樣式?jīng)_突。最好將樣式更改限制在特定使用的CSS類中,。

應(yīng)該避免下面這種做法：

div {
    width: 120px;}

推薦的做法：

.myStyleClass {
    width: 120px;}

SAPUI5應(yīng)用程序可以為元素創(chuàng)建動態(tài)id,。不要在自定義CSS中使用這些id作為選擇器，因為它們不是一種穩(wěn)定的 id(stable id),，會隨時間變化,。最好是添加和使用CSS類。

不推薦的做法：

#__view1__button0 {
    font-weight: bold;}

推薦的做法：

.myEmphasizedButton {
    font-weight: bold;}