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

Question

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

目前我正在尝试重构现有的应用程序以使用 CSS 模块，该应用程序自此使用 classic sass 和 BEM 方法。

在描述我的问题之前，我想明确表示我不理解我正在解决的问题实际上不在 CSS 模块的范围内。人们应该只为在单个模块内使用而应用样式。最多应该将 CSS classes 与其他模块的其他 CSS classes 组合起来。但基本上：您构建一个 (HTML-) 模块，然后使用 CSS 模块来设置该模块的样式，仅此而已。

问题来了：在重构的过程中，有一个问题源于拥有基于 SASS 的样式系统。我找不到在 CSS 模块环境中使用 CSS class 的有效方法，而这个 class 应该与来自另一个模块。

SASS中的示例：

[page.scss]

.wrapper {
    margin: 0;
}

[headline.scss]

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

可以看到：一个模块（页面）定义了一个CSSclass"wrapper"，另一个模块定义了一个CSSclass"headline".此外，class "headline" 放在 class "wrapper".

中时应该表现得有点不同

同样，我知道这并不是 CSS 模块的真正领域。但我真的很想知道 CSS 模块是否可行？ CSS 模块的 "composes"-feature 不适合这里...

Answer 1

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

重构它的方法是创建组件样式变体，并在包装器中呈现时通过 prop 显式设置变体。

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

CSS

.headline {
  color: green;
}

JSX

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

与其尝试从其他地方覆盖 .headline class 名称，不如创建一个变体 class 名称来切换通过道具：

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

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

CSS Modules - referencing classes from other modules

css

css-modules

react-css-modules

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

CSS Modules - referencing classes from other modules

css

css-modules

react-css-modules

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