时间戳

首页 > 解决方案 > 如何在子组件中使用相同的 CSS 变量名

css - 如何在子组件中使用相同的 CSS 变量名

问题描述

嘿，我彼此之间有多个组件。

我希望它们都有 CSS 变量 --border-radius 并将值传递给子组件的变量。

我有 4 个组件，但对于这个示例，我将其简化为 2 个组件来说明我的问题。

组分 A 

:host{
    --border-radius: 50%;
    border-radius: var(--border-radius);

    component-b {
       --border-radius: var(--border-radius);    
    }
}

B组份

:host{
    --border-radius: 0;
    border-radius: var(--border-radius);
}

当我在浏览器中检查组件 B 时，我看到它的边界半径设置为“var(--border-radius)”而不是预期的“50%”。

有没有办法做到这一点？

编辑：注意组件 A 和组件 B 都是独立组件，应该能够采用 CSS 属性 --border-radius 。问题在于将变量属性传递给具有相同变量名称的下一个组件。

标签： cssangular

解决方案

好的，所以在考虑了 CSS 是如何工作的一段时间后，它会将样式级联下来……我得出的结论是我错误地考虑了变量。

它的工作方式是：

组件A定义--border-radius为10px；

组件 B 没有定义它，但如果存在则使用它，否则使用默认值。通过不在 B 的开头定义它，它将自动从 A 级联下来。

组分 A

:host {
    --border-radius: 10px;
    border-radius: var(--border-radius);
}

B组份

:host{
    border-radius: var(--border-radius, 0);
}

在该示例中，B 将默认为 0，但接受 A 的 10px 或您直接传递给 B 的任何其他值。

推荐阅读