基于具有css模块的父项覆盖样式

时间:2017-10-21 14:39:42

标签: css css-modules

所以我正在做反应,并且有一个SvgIcon组件,它有自己的默认样式和Button组件,它有自己的默认样式,使用css模块。我要做的是当SvgIcon组件位于Button组件内时,我需要使.button { .svg-icon { fill: $grey3; } } 组件的样式略有不同。使用标准SASS,我只需在按钮样式中执行此操作:

SvgIcon

由于带有css模块的类名是随机的哈希值,我想不出一个好方法。

我可以将一个额外的类名称传递给来自按钮样式的SvgIcon组件,但是每次我想在{{1}中使用Button组件时我都要记得这样做组件(或者我可以创建一个ButtonSvgIcon组件,但是这种模式可能导致大量这些非常愚蠢的组件,只是造型在我的肠道感觉不对劲)。这也有一个问题,如果在SvgIcon组件之后包含Button组件,它将覆盖按钮应用的css,因为我按照这种方式生成的css顺序的控制要少得多比较像萨斯这样的东西(虽然我认为ButtonSvgIcon组件会解决这个问题。)

我也可以在SvgIcon组件的样式代码中使用SvgIcon覆盖样式,但这似乎是对组件知识的反向(对于使用另一个组件的组件而言,它更有意义)在这种情况下,使用Button的{​​{1}}组件覆盖样式,而不是可能在需要覆盖所有这些样式的任意数量的其他组件中使用的组件。

当一个组件位于具有css模块的另一个组件的上下文中时,是否有一种标准方法可以覆盖一个组件的样式?

0 个答案:

没有答案