为什么我不能在主题之外自定义 Web 组件库的样式？ SAP UI5

Question

为什么我不能在主题之外自定义 Web 组件库（即 UI5）的样式？我已经尝试了从内联样式到将 Web 组件包装在 Styled-components 中的所有方法。我尝试使用 :host(), ::slott。我试图将样式标签注入模板本身。我真的很茫然，我无法更改样式的一个像素。我倾向于多重阴影 dom 或封装 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>

现在外部 Tabcontainer 可以很容易地设置任何类型的样式，但是当我尝试设置任何 tabContainer 的内部 Tabs 的样式时...蟋蟀

为了清楚起见，我正在围绕预构建的 Web 组件库构建一个 lit-html 包装器，以与 React 和 Angular 一起使用。但我需要能够重新设计导入的网络组件

Answer 1

因此，从免费提供的库中设计 Web 组件样式的问题是：

Web 组件通常使用 shadowDOM 创建，这对封装。但是当你想回去并尝试覆盖它时封装并完全覆盖 Web 组件 CSS。你会卡在 web 组件的顶层，就在它的 shadowDOM 外面（如果使用它的话）。对于一些图书馆，这是故意的，其他人允许你这样做，但你可能有支付一些大笔现金来使用这些图书馆。
幸运的是，您可以做一些事情来为网络增添趣味—— 组件。 CSS 变量，很多库将 CSS 变量构建到他们的主题组件。因此，您可以做的一件事是在他们的文档页面或浏览器的元素选项卡中找到他们的 CSS 变量列表，然后剪切并粘贴它们英寸
如果这对您来说还不够，还有另一种选择。您可以以非常类似于的方式创建自己的 Web 组件在 ReactJS 中创建它们。有一个叫做 Stencil 的工具为您提供了一种使用打字稿和 CSS 创建 Web 组件的方法。 Stencil 解决了我所有的问题，它内置了所有的 polyfill。它设置您所有的测试和部署。 https://stenciljs.com/

为什么我不能在主题之外自定义 Web 组件库的样式？ SAP UI5

Why cant I customize the styling of web component libraries, beyond themes? saps UI5

html

javascript

web-component

reactjs

ui5-webcomponents