Customize ui5 web component Side Navigation

Question

I am trying to use and customize the side navigation component but I can not change it's background color, e.g.

ui5-side-navigation { background-color: yellow; } 

does not have any effect on the component.

So the questions are:

• Can I customize this component?
• If yes, how I can change it's css properties?

Thanks

Answer 1

First, the documentation has a section on themes, but this implies creating an entire theme using the Theme Designer on BTP.

The reason the code above is not working, is because Web Components use shadow DOM which you can see when you inspect the element in the debugger tools.

Shadow DOM is completely encapsulated, so it has it's own styling. One way to add some styling to shadow DOM is to insert a stylesheet, like this:

const styleElement = document.createElement("style");
const sideNavigation = document.getElementsByTagName("ui5-side-navigation")[0];
styleElement.innerText = `div { background: yellow !important; }`;
sideNavigation.shadowRoot.prepend(styleElement);

Here's an example in code sandbox

Answer 2

Alternatively you could try inline CSS on ui5 components like this:

<ui5-input style="'background-color: yellow'"></ui5-input>

For your example use ui5-side-navigation instead of input

I found this solution in the offical docu for the Step Input Component alignment: https://sap.github.io/ui5-webcomponents/playground/components/StepInput/