15

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

目前我正在尝试重构一个现有的应用程序以使用 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 模块的“组合”功能并不适合这里......

4

1 回答 1

6

这是迁移到 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来消除变体之间重复的常见样式。

于 2017-03-03T21:44:26.117 回答