'Is it possible to use a class from another CSS Module?

Is it possible in one CSS Module to use a class from another CSS Module?

The problem is that CSS Modules is doing it's own class names translation and so .class from A.css will become A-module--class-something and .class from B.css will become B-module--class--somethingElse and they will be treated as separate classes.

A.css

.class {
  (...)
}

B.css

/* .class is the same class as in A.css */
.class > .someOtherClass {
}
css-modules


Solution 1:[1]

Assuming A and B are both CSS files, if you link to both of them (in the head), they will both operate as normal.

It is important to note that if they say conflicting information (they are targeting the same style attribute) one of the styles will not be applied (it will get crossed out when looking at the development tools). You can get past this problem by using the !important keyword on your styles. But use this keyword sparingly as it is not considered a best practice.

As you can see in the below snip, it chooses one to use. The file names can be seen on the right.

enter image description here

Solution 2:[2]

Are you asking for something like this?

A.css

.class {
  /* rule-set */
}

B.css

@import "A.css"
.class > .someOtherClass {
  /* rule-set */
}

Solution 3:[3]

After some investigation, it seems there is no direct way to reference a class name.

So I figured out a possible solution:

B.css

:global(.class) > .someOtherClass {
  /* rule-set */
}

Then apply class in your html, and after processing, it will be converted like this:

<div class="class A-module--class--something">
    <div class="B-module--class--somethingElse">
    </div>
</div>

This way, you keep A-module--class--something rule (which won't collide ever) and a "class" reference for more complex rules. Not the best solution since you need to modify your html code, but it will minimize css polluted workarounds.

Solution 4:[4]

What I was able to do is to "import" the other class like such

@value someClass from "./xxx.module.css";

and then reference it like that:

:global(.someClass) .myClass {
  margin: auto;
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Skylar
Solution 3 cesrafa
Solution 4 flq

Related Questions