自定义ui5 web组件侧边导航答案

【问题标题】：Customize ui5 web component Side Navigation自定义ui5 web组件侧边导航
【发布时间】：2022-11-07 23:16:43
【问题描述】：

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

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

对组件没有任何影响。

所以问题是：

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

谢谢

【问题讨论】：

标签： sapui5 ui5-webcomponents

【解决方案1】：

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

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

Shadow DOM 是完全封装的，所以它有自己的样式。向 shadow 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 中的一个示例

【讨论】：

感谢您的回复@Jorg。是的，我的主题将是一个解决方案（全球），但主题设计师不是免费的。我将按照您的建议从 js 方面进行样式设置。

【解决方案2】：

或者，您可以在 ui5 组件上尝试内联 CSS，如下所示：

<ui5-input [attr.style]="'background-color: yellow'"></ui5-input>

对于您的示例，请使用 ui5-side-navigation 而不是输入

【讨论】：