覆盖父组件的 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>

然后，外部组件将调用它

外部组件

.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个变量，像这样：

外部组件

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

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

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

内部组件

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

这样，如果颜色是由外部组件定义的，最终的值将是覆盖的那个；否则，它将是后备值，在本例中为红色。

通过这样做，可以在组件的最顶层类上创建所有可覆盖样式的宣言，从而创建一个黑盒组件。

感谢大家的帮助！