SAP-UI5 offers a rich set of built-in themes and controls that deliver consistent and enterprise-ready user interfaces. However, there are scenarios where you need to tailor the look and feel beyond what the standard themes provide — to meet branding requirements or specific UI designs. This is where custom CSS comes into play.
This article explains how to implement custom CSS in SAP-UI5 applications effectively, ensuring that your UI stays consistent, maintainable, and aligned with SAP-UI5’s best practices.
SAP-UI5 controls come with default styling that follows SAP Fiori guidelines. But business needs sometimes require:
Custom CSS provides the flexibility to implement these without modifying core UI5 libraries.
The recommended way is to place custom CSS files within your UI5 application structure and load them via the manifest.json or component code.
Example: Add CSS in manifest.json
"sap.ui5": {
"resources": {
"css": [
{
"uri": "css/customStyles.css"
}
]
}
}
Place your customStyles.css inside the webapp/css/ folder.
This approach:
For minor styling, you can add style classes or inline styles directly on controls.
<Button text="Custom Styled" class="myCustomButton" />
And in CSS:
.myCustomButton {
background-color: #007cc0;
color: white;
font-weight: bold;
}
Use addStyleClass() in controller if dynamic:
this.byId("myButton").addStyleClass("myCustomButton");
Sometimes you want to override specific styles on UI5 controls, for example, changing button hover color.
.sapMBtn:hover {
background-color: #004080 !important;
}
Note: Use !important sparingly and always check for side effects.
.myAppButton.Suppose you want to highlight rows in a table based on a condition.
Controller logic:
var oTable = this.byId("myTable");
oTable.getItems().forEach(function(oItem) {
var oContext = oItem.getBindingContext();
if (oContext.getProperty("Status") === "Critical") {
oItem.addStyleClass("highlightRow");
}
});
CSS:
.highlightRow {
background-color: #f8d7da !important;
}
Custom CSS empowers SAP-UI5 developers to fine-tune application appearance beyond the standard themes, enabling branding compliance and enhanced user experience. By following the best practices outlined above, you can implement maintainable, conflict-free styles that integrate seamlessly with SAP-UI5's framework.