Customize ui5 web component Side Navigation

user_1368548 0
Viewed 124

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

ui5-webcomponents sapui5
1 Answers

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

user_5026130
Related