为什么我不能定制web组件库的样式，而不是主题？saps UI5
为什么我不能定制web组件库的样式，而不是主题？saps UI5
提问于 2022-05-25 19:20:11
为什么我不能自定义web组件库的样式，即UI5，超出主题？我已经尝试了一切，从内联造型到包装网页组件的样式-组件。我尝试使用:host()，::slott。我尝试将样式标记插入模板本身。我真的不知所措，我无法改变一个像素的造型。我倾向于这个问题是多影子或封装CSS。
<TabContainer backgroundDesign={"red"} ref={ToggleRef} className={`webCompToggleTabBar`} id="UI5TabContainer" tabs-overflow-mode="StartAndEnd" collapsed fixed>
{Object.keys(Tabs).map((subTemplate, i) => {
return (<Tab className="webCompToggleTab" key={Math.random()} additional-text={subTemplate} name={subTemplate} />);
</TabContainer>现在，外部禁忌容器很容易使用任何类型的样式，但当我试图对表容器的任何内部Tabs...crickets进行样式化时
为了清晰起见，我正在为预先构建的web组件库构建一个lit包装器，以便与React和wrapper一起工作。但是我需要能够重新设计导入的web组件。
回答 1
Stack Overflow用户
回答已采纳
发布于 2022-05-29 02:05:11
因此，从可免费获得的库中设计web组件的问题是：
- Web组件通常是使用shadowDOM创建的，这对于封装非常有用。但是，当您想要返回并试图重写该封装并完全覆盖web组件时，CSS。您将卡在web组件的顶层，就在它的外部是shadowDOM(如果有使用它的话)。对于一些库，这是故意的，其他库允许您这样做，但是您可能需要花费大量的现金才能使用这些库。
幸运的是，
- 可以做一些事情来为web组件增添趣味。CSS变量，许多库将CSS变量构建到它们的组件中以进行主题化。因此，您可以做的一件事是在文档页或浏览器的元素选项卡中找到它们的CSS变量列表，然后将它们剪切并粘贴到.
中。
- ，如果这对您来说还不够，还有另一个选择。您可以以非常类似于在ReactJS中创建web组件的方式创建自己的web组件。有一个叫做模板的工具，它为您提供了一种使用类型记录和CSS创建web组件的方法。模具解决了我所有的问题，它有所有的填充内置。它设置了所有的测试和部署。https://stenciljs.com/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/72383100
复制相关文章
相似问题
腾讯云开发者
