Skip to Content

Add Custom Styles and Components for UI5 Web Components

test
0 %
Add Custom Styles and Components for UI5 Web Components
Details

Add Custom Styles and Components for UI5 Web Components

2019-12-17
Beginner
10 min.
HTML5, Tutorial, Beginner, SAP Fiori
Add custom styles and custom components to your application using UI5 Web Components for React.

You will learn

  • How to change style of existing components
  • How to style own components

In this tutorial, you will learn how to apply styling to the UI5 Web Components. You can add custom styles and even overwrite CSS Variables on any level. Also you’ll learn how to style your custom components with the styling approach of SAP Fiori

Step 1: Change style for existing components
View Full Instructions

You can change the appearance of the Web Components by using CSS Variables. Per default, the Fiori 3 theme parameters are injected into the document head as CSS Variables. If you want to change e.g. the color of all texts, you can do that by creating another style element.

Open the index.html file inside of your public folder and add the following content inside of the <head> element:

  <style>
    * {
      --sapUiTileTitleTextColor: limegreen;
    }
  </style>

The sapUiTileTitleTextColor CSS Variable changes the style of the Card titles and the * selector appends the style to all elements.

Custom Style

As a consequence, all HTML Elements in the subtree where this style was applied are now displaying their texts in limegreen instead of #6a6d70 which would be the default value for Fiori 3. You can change CSS Variables on any level - in the head, or on every single element by using either CSS classes or element style.

A full list of all supported CSS Variables can be found here or in the SAPUI5 Theming Parameters Toolbox.

Done
Log on to answer question
Step 2: Style your own component
View Full Instructions

If you want to add a custom component to your app, but still want to use the styling approach of the UI5 Web Components. You can hook into the theming by using react-jss.

  1. Install react-jss.

    npm install react-jss

  2. Create a custom component MyCustomElement.jsx under ./src with following content:

    import React from "react";
import { createUseStyles } from "react-jss";

const styles = ({ parameters }) => ({
  container: {
    backgroundColor: parameters.sapUiGlobalBackgroundColor,
    fontFamily: parameters.sapUiFontFamily,
    height: "50px",
    display: "flex",
    justifyContent: "center",
    alignItems: "center"
  },
  text: {
    color: parameters.sapUiNegativeText,
    fontSize: parameters.sapUiFontHeader1Size
  }
});

const useStyles = createUseStyles(styles);

export const MyCustomElement = () => {
  const classes = useStyles();

  return (
    <div className={classes.container}>
      <span className={classes.text}>My custom Text Element</span>
    </div>
  );
};

    When using the jss styling functions, the function will be called with an object with three properties:

    {
 theme: 'the current theme as string, e.g. "sap_fiori_3"',
 parameters: "object with all styling parameters, please check the CSS Variables link.",
 contentDensity: 'Current Content Density mode, either "Compact" or "Cozy".'
}

  3. Import the custom component and add it to your Home component.

    import { MyCustomElement } from "./MyCustomElement";

     return (
    <FlexBox
      justifyContent={FlexBoxJustifyContent.Center}
      wrap={FlexBoxWrap.Wrap}
    >
      <MyCustomElement />
   ...
    Custom Element

Now you can see, that the element has the same fontFamily and uses the same semantic colors as the UI5 Web Components for React.

When using the jss styling function: What is the name of the object containing all style parameters?
×

Next Steps

Navigate tutorial steps

QR Code

QR code
Back to top