Question

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

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

在我描述我的问题之前，我想明确指出我正在解决的问题是我正在解决一个实际上不属于CSS模块领域的问题。应该仅在单个模块中使用样式。最多应该与其他模块的其他CSS类组成CSS类。但基本上：你构建一个（HTML-）模块，然后使用CSS模块来设置该模块的样式。

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

SASS中的示例：

[page.scss]

.wrapper {
    margin: 0;
}

[headline.scss]

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

如您所见：一个模块（页面）定义了一个CSS类＆＃34;包装器＆＃34;，另一个模块定义了一个CSS类＆＃34;标题＆＃34;。此外，课程＆＃34;标题＆＃34;放置在类＆＃34;包装器＆＃34;。

中时应该有点不同

同样，我知道这不是CSS模块的真正领域。但我真的想知道这是否可以用CSS模块实现？＆＃34;组成＆＃34; - 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来消除变体之间的重复常见样式。

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

1 个答案: