CSS模块-引用其他模块中的类 [英] CSS Modules - referencing classes from other modules

问题描述

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

I have understood the concept of CSS modules so much that I am convinced that I do not want to do anything else that that for the future.

当前，我正在尝试重构现有应用程序以使用CSS模块，此后该应用程序已将经典的sass与BEM方法结合使用.

Currently I am trying to refactor an existing app to use CSS modules, the app has used classic sass with BEM methodology since.

在描述我的问题之前，我想明确指出，我不了解我要解决的问题实际上不在CSS模块范围内.一个人应该只将样式应用于单个模块中.最多应该将CSS类与其他模块的其他CSS类组成.但基本上:构建一个(HTML-)模块，然后使用CSS模块对该模块进行样式设置，就是这样.

Before I describe my problem I want to make clear that I undestand that I am addressing an issue that is not really within the domain of CSS modules. One should apply styles solely for usage inside a single module. At the most one should compose CSS classes with other CSS classes of other modules. But basically: You build an (HTML-)module and you use CSS modules to style that module and that's that.

这是问题所在: 在重构过程中，只有一个基于基于SASS的样式系统的问题.当该类应与另一个模块中的另一个类结合使用时，我找不到在CSS模块环境中与CSS类一起使用的有效方法.

Here's the problem: In the process of refactoring there is one single issue that derives from having had a SASS-based style system. I can't find a valid method to work with a CSS class within a CSS modules environment when this class should work in combination of another class from another module.

SASS中的示例:

[page.scss]

[page.scss]

.wrapper {
    margin: 0;
}

[headline.scss]

[headline.scss]

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

您将看到:一个模块(页面)定义了CSS类包装器"，另一个模块定义了CSS类标题".另外，当放置在包装器"类中时，标题"类的行为应有所不同.

As you can see: One module (page) defines a CSS class "wrapper", another module defines a CSS class "headline". And, additionally, the class "headline" should behave a bit differently when placed inside the class "wrapper".

同样，我知道这并不是CSS模块的领域.但是我真的很想知道CSS模块是否可以做到这一点? CSS模块的组合"功能在这里并不适合...

Again, I know that this is not really the domain of CSS modules. But I really would like to know if this is somehow doable with CSS modules? The "composes"-feature of CSS modules does not really fit here...

推荐答案

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

This is a common issue when migrating to CSS Modules. In short, a css module cannot override a style from another css module, and this is by design. Styles are supposed to live with the components that render them, and nowhere else.

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

What you can do to refactor this is to create a component style variant and explicitly set the variant through a prop when rendered within your wrapper.

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

For example, suppose your headline component currently looks something like this:

CSS

.headline {
  color: green;
}

JSX

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

您可以创建一个可通过prop进行切换的变体类名，而不是尝试从其他位置覆盖.headline类名.

Rather than trying to override the .headline class name from somewhere else, you can create a variant class name that you toggle through a 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变体:

And when you render it from your wrapper, set it to the orange variant:

<Headline orange />

提示:您可以使用composes消除变体之间重复的通用样式.

Tip: you can use composes to eliminate duplicate common styles between your variants.

这篇关于CSS模块-引用其他模块中的类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！