从父组件覆盖CSS变量

Question

有！

因此，我尝试执行以下操作：AngularJs中有一个小组件，它将呈现一个类似于标签的单元。我在其中定义一般样式，例如颜色和边框。它们应该是默认值。但是，我希望外部组件能够通过更改CSS变量的值来覆盖它。这是示例：

tagLike.html

.tag-like-container {
  --tag-like-color: red;
  
  color: var(--tag-like-color);
 }

 <div class="tag-like-container">
    my tag
 </div>

然后，外部组件会调用它

outerComponent

.outer-container {
  --tag-like-color: blue;
 }

<div class="outer-container">
  <tag-like></tag-like>
</div>

但是，--tag-like-color的最终值为 red ，但我希望它为 blue 。有关如何解决此问题的任何想法？

谢谢！

Answer 1

问题是您正在更改颜色，但是您从未将实际颜色值应用于.outer-container。您需要指定.outer-container应该使用变量作为颜色。

.outer-container {
    --tag-like-color: blue;
    color: var(--tag-like-color);
 }

Answer 2

找到了解决方案！方法是使用2个变量，如下所示：

outerComponent

.tag-like-override {
  --tag-like-color: blue;
 }

<tag-like class="tag-like-override"></tag-like>

然后，在innerComponent中，使用var(value, fallback)模型，我们可以定义

innerComponent

--final-tag-color: var(--tag-like-color, red);
color: var(--final-tag-color);

这样，如果颜色由外部组件定义，则最终值将是覆盖值之一；否则，它将是后备值，在这种情况下为红色。

这样做，可以在组件的最顶层类上创建所有可覆盖样式的清单，从而创建黑盒组件。

感谢所有帮助！