CSS模块 - 引用来自其他模块的类

Question

我已经非常了解CSS模块的概念，我相信我不想为未来做任何其他事情。

目前我正在尝试重构现有的应用程序以使用CSS模块，该应用程序自从使用了BEM方法以来使用了经典的sass。

在我描述我的问题之前，我想澄清一点，我不明白我正在处理一个不在CSS模块范围内的问题。应该将样式单独应用于单个模块中。最多人应该用其他模块的其他CSS类组成CSS类。但基本上：您构建了一个（HTML-）模块，并使用CSS模块来设置该模块的样式，就是这样。

问题出在这里： 在重构的过程中，有一个单一的问题源自拥有基于SASS的风格系统。我无法找到一个有效的方法来处理CSS模块环境中的CSS类，当此类应该与另一个模块的另一个类组合使用时。

实施例SASS：

[page.scss]

.wrapper { 
    margin: 0; 
} 

[headline.scss]

.headline { 
    color: green; 
} 
.wrapper { 
    .headline { 
     color: orange; 
    } 
} 

正如可以看到：一个模块（页）定义了一个CSS类“包装器”，另一个模块定义了一个CSS类“标题”。而且，此外，类“标题”在放在类“包装器”内时应该有点不同。

同样，我知道这不是真正的CSS模块的领域。但我真的很想知道这是否可以通过CSS模块进行操作？ CSS模块的“合成”特征并不适合这里...

Answer 1

这是迁移到CSS模块时的常见问题。简而言之，一个CSS模块不能覆盖另一个CSS模块的样式，这是设计。样式应该与呈现它们的组件共存，而其他任何地方都没有。

你可以做什么来重构这个是创建一个组件样式变体，并且在你的包装中呈现时通过一个prop明确地设置变体。

例如，假设您的标题组件目前看起来是这样的：

CSS

.headline { 
    color: green; 
} 

JSX

import styles from "Headline.css"; 
const Headline =() => { 
    return (
    <div className={styles.headline} /> 
); 
} 

而不是试图覆盖的.headline从别的地方类的名称，您可以创建一个可通过道具切换变体类名称：

CSS

.headline-green { 
    color: green; 
} 

.headline-orange { 
    color: orange; 
} 

JSX

import styles from "Headline.css"; 
const Headline = ({orange}) => { 
    return (
    <div className={orange ? styles.headlineOrange : styles.headlineGreen} /> 
); 
} 

而当你从使它你的包装，将其设置为orange变体：

<Headline orange /> 

提示：您可以使用composes消除变体之间的重复常见样式。