CSS 模块 - 从其他模块引用类

Question

我非常了解 CSS 模块的概念，以至于我确信我不想为将来做任何其他事情。

目前我正在尝试重构一个现有的应用程序以使用 CSS 模块，该应用程序从那时起就使用了经典的 sass 和 BEM 方法。

在我描述我的问题之前，我想明确表示我不明白我正在解决一个并不真正属于 CSS 模块领域的问题。应该仅在单个模块内应用样式。最多应该将 CSS 类与其他模块的其他 CSS 类组合在一起。但基本上：您构建一个 (HTML-) 模块，然后使用 CSS 模块来设置该模块的样式，仅此而已。

这就是问题所在：在重构过程中，有一个问题源于拥有基于 SASS 的样式系统。当此类应该与来自另一个模块的另一个类结合使用时，我找不到在 CSS 模块环境中使用 CSS 类的有效方法。

SASS 中的示例：

[页面.scss]

.wrapper {
    margin: 0;
}

[标题.scss]

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

如您所见：一个模块（页面）定义了一个 CSS 类“包装器”，另一个模块定义了一个 CSS 类“标题”。此外，当放置在类“包装器”中时，类“标题”的行为应该有所不同。

同样，我知道这并不是 CSS 模块的真正领域。但我真的很想知道这是否可以通过 CSS 模块实现？CSS 模块的“组合”特性并不适合这里......

Answer 1

这是迁移到 CSS 模块时的常见问题。简而言之，一个 css 模块不能覆盖另一个 css 模块的样式，这是设计使然。样式应该与渲染它们的组件一起存在，而不是其他地方。

您可以做的重构是创建一个组件样式变体，并在您的包装器中呈现时通过道具显式设置变体。

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

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消除变体之间的重复常见样式。