如何在子组件中使用相同的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);
}

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

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

有没有办法做到这一点

编辑：

---

注意：组件A和组件B都是独立的组件，应该能够接受CSS属性——边界半径。问题在于将variable属性向下传递给具有相同变量名的下一个组件。

假设您要创建存储元素边界半径的CSS变量，可以使用：根选择器创建全局变量，例如：

:root { --border-radius: 50%; }

---

好吧，在考虑CSS是如何工作的一段时间后，事实上它将样式级联下来。。。我得出的结论是，我对变量的思考是错误的

它的工作方式是：

组件A定义——边界半径为10px

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

组件A

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

组件B

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

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

---

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

浏览器将始终显示var（--边界半径），您需要检查“计算”选项卡以查看值谢谢，但这不是问题所在。它根本没有计算边界半径。我不确定我是否理解，因为在您的示例中的组件B中，您显式地用

--边界半径：0覆盖了引用的var

因此，当它当前位于@TemaniAfif点时，人们会认为它是

0

而不是

50%

，如果您只是检查元素，那么它将在检查中读取为

var（-border radius）

，但将在计算样式中显示实际值。。。“不计算”是很困难的，因为用户代理总是提供一个后备方案。@ChrisW。假设我有4个组件，它们都是独立的，接受属性——边界半径。我有一个很大的组件，它是由相互之间的组件组成的。例如：D在C里面，B里面，B里面，在大的组件A里面。我想在A上设置——边界半径，并让它反映在B上，C&DUnless也许你实际上要找的是A:

：主机{——边界半径：50%；}

B:

主机上下文（--border radius）{border radius:var（--border radius）；}

谢谢，但是我只想在这些组件之间传递它，而不是整个程序。ng深度选择器仍然会有和我一样的问题。。