Add custom CSS to SAP UI5 XML view using code

An example is shown below:

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

Style sheets are included in XML views in the same way as plain HTML. To add more CSS classes to SAPUI5 controls, use the class attribute. It is important for SAP UI5 developers to choose carefully what elements to style, as CSS always affects the entire page and is not limited to views.

Example: Here's how to add a style definition and define a button that uses it in an XML view.

 <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>

Note that to allow your XML view to be used in an environment where the Content Security Policy denies inline styles ( Content Security Policy denying inline styles ) (ie unsafe-inline sources without the style-src directive), you need to reference an external stylesheet instead of Embed the stylesheet into its XML view.

A most direct example:

 myButton.addStyleClass("mySuperRedJerryButton");

In the code above, the string given as sStyleClass will be added to the class attribute of the control's root HTML element.

This method is intended to be used to mark a control as a special type, which can be given special styles using CSS selectors referencing this style class name.

A practice that should be avoided is to style DOM elements directly, which can lead to unpredictable results because SAPUI5 does not guarantee the stability of the internal control DOM tree. Also, this can lead to style conflicts when the application is running on a shared runtime environment such as the SAP Fiori launchpad or adding custom HTML. It's best to limit style changes to specific CSS classes used.

The following practices should be avoided:

 div {
    width: 120px;
}

Recommended practice:

 .myStyleClass {
    width: 120px;
}

SAPUI5 applications can create dynamic ids for elements. Don't use these ids as selectors in custom CSS because they are not a stable id and will change over time. It's better to add and use CSS classes.

Not recommended practice:

 #__view1__button0 {
    font-weight: bold;
}

Recommended practice:

 .myEmphasizedButton {
    font-weight: bold;
}