如何在嵌套选择器中跨 css 模块重复使用 css 属性？

问题描述

一些背景：我已将我的设计师的 Sketch 文本样式转换为 css 模块中的类。对于此示例，我有一个“labels.module.css”文件，其中包含类名中每种标签类型的样式。以下是摘录（@apply 来自顺风）：

.labelnormalLight,.labelnormalMidGray,.labelnormal,.labelnormalWhite
{
    @apply font-normal font-sans text-xs leading-3;
}

.labelnormalLight {
    @apply text-neutralMediumLight;
}

现在我有一个元素，我在其上使用样式 .labelnormal。但是，当该元素的父元素悬停在上方时，我需要将样式切换为 .labelnormalLight 的样式。为此，我编写了另一个 .module.css 文件，并尝试在其中组合两种样式：

.name {
    composes: labelnormal from '../styles/labels.module.css';
}

.person:hover .name {
    composes: labelnormalLight from '../styles/labels.module.css';
}

然而，这失败了，因为 CSS 模块不允许在单个本地类名内进行组合，根据此错误：

Error: composition is only allowed when selector is single :local class name not in ":local(.person):hover :local(.name)"

所以我的问题是：如何在保持 CSS DRY 的同时还允许我覆盖基于父状态的样式？我已经考虑过导出这些值，但随后我必须知道要覆盖哪些值。

更新： 所以我能够使用 Sass 的 @extend 来完成这个，通过指定 %labelnormalLight 并扩展它。然而，由于我无法在 Sass 中使用 Tailwind，我无法使用 Tailwind 实现这一点。我仍然想知道如何在没有 sass 的情况下做到这一点，因为这实际上是我需要它的唯一原因。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）