CSS Modules - 引用其他模块的类

Question

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

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

在我描述我的问题之前，我想明确表示我不明白我正在解决一个实际上不在 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 模块的样式，这是设计使然。样式应该与渲染它们的组件一起使用，而不是其他任何地方。

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

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

CSS

.headline {
  color: green;
}

JSX

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

而不是试图覆盖 .headline来自其他地方的类名，您可以创建一个通过 Prop 切换的变体类名:

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