node.js - 继承 - React 和 Webpack 中的 CSS 模块

Question

假设我有一个名为 nav 的 React 模块其中有多个<li>和<a>嵌套在其中的标签。使用 CSS 模块，我怎样才能拥有像这样的“可继承”或“级联”规则:

nav {
    background: red;

    > li > a {
        background: green;    
    }
}

似乎我只能将一种样式直接应用于一个元素？

Answer 1

这不是inheritance或the cascade您的代码示例正在演示，它是选择器 combinators 的使用.

您的示例显示了支持 nesting 的 SCSS 代码所以这个:

nav {
    background: red;
    > li > a {
        background: green;
    }
}

被转译为:

nav {
    background: red;
}

nav > li > a {
    background: green;
}

CSS 模块不会阻止您使用这些组合器 - CSS 模块是 CSS 的超集，因此第二个示例可以开箱即用。如果与 SCSS 一起使用，第一个示例将起作用。

值得注意的是，CSS 模块背后的许多合理性都表明上述 CSS 效果不佳，至少有两个原因:

1. 定位标签
   • nav、li 和 a 都非常通用，因此除了最小的项目之外，它极有可能与其他规则发生冲突。
2. 高特异性
   • nav > li > a 是不必要的特定(并且与标记结构紧密耦合)。为了使 CSS 成功扩展，通常认为降低特异性是一种很好的做法，这样选择器就不必竞争(!重要)。