自定义 ui5 web 组件侧边导航

Question

我正在尝试使用和自定义 side navigation component 但我无法更改它的背景颜色，例如

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

对组件没有任何影响。

所以问题是：

我可以自定义这个组件吗？
如果是，我该如何更改它css 属性?

谢谢

Answer 1

首先，文档有一个 section on themes，但这意味着使用 BTP 上的主题设计器创建整个主题。

上面的代码不起作用的原因是 Web 组件使用 shadow DOM，您可以在调试器工具中检查元素时看到它。

Shadow DOM 是完全封装的，所以它有自己的样式。向阴影 DOM 添加一些样式的一种方法是插入样式表，如下所示：

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

这是 code sandbox

中的示例

自定义 ui5 web 组件侧边导航

Customize ui5 web component Side Navigation

sapui5

ui5-webcomponents