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

2023年11月10日 234次阅读

我已经理解了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类“包装器”,另一个模块定义了一个CSS类“标题”.此外,当放置在类“包装器”内时,类“标题”的行为应该有点不同.

同样,我知道这不是CSS模块的真正领域.但我真的想知道这是否可以用CSS模块实现？ “组合” – CSS模块的功能并不适合这里……

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

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

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

CSS

.headline {
  color: green;
}

JSX

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

您可以创建一个通过prop切换的变体类名称,而不是尝试从其他位置覆盖.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} />
  );
}

当您从包装器中渲染它时,将其设置为橙色变体：

<Headline orange />

提示：您可以使用组合来消除变体之间的重复常见样式.

点赞