自定义ui5 web组件侧导航

Question

我正在尝试使用和自定义侧导航组件，但我不能改变它的背景颜色，例如

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

对组件没有任何影响。

问题是:

• 我可以自定义这个组件吗?
如果是，我怎么能改变它的css属性呢?

感谢

Answer 1

首先，文档中有一节是关于主题的，但这意味着在BTP上使用主题设计器创建一个完整的主题。

上面的代码不能工作的原因是因为Web组件使用了影子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);

下面是代码沙箱

中的一个示例

Answer 2

或者你可以尝试在ui5组件上使用内联CSS，像这样:

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

对于您的示例，使用ui5侧导航而不是输入

我在步骤输入组件对齐的官方文档中找到了这个解决方案:https://sap.github.io/ui5-webcomponents/playground/components/StepInput/