Skip to main content

5.10.1.1 CSS Modules Uder The Hood

If this process simply detects this kind of import:

import classes from './App.css'

from a CSS file, and understands that we don't just want to add the CSS as it is, but instead it now looks into the CSS file, transforms every class name here, to a random unique one, and returns us a map of these generated unique class names, mapped to the class names we chose here as properties and as object which we import. So every class name we have in CSS file is now a property of this imported object, and the value for every property will be this randomly generated unique class name, generated by this package.

Final file
...
<head>
...

<style type="text/css">
.App__App__1o-Fp {
  text-align: center;
}

.App__red__lKdi_ {
  color: red;
}

.App__bold__1Ylab {
  font-weight: bold;
}

.App__Button__2_NDl {
  background-color: green;
  color: white;
  font: inherit;
  border: 1px solid blue;
  padding: 8px;
  cursor: pointer;
}

.App__Button__2_NDl:hover {
  background-color: lightgreen;
  color: #333;
}
</style>

...
</head>
<body>
...

<div id="root">
  <div class="App__App__1o-Fp">
    <h1>Hi, I'm a React app!</h1>
    <p class="">This is really working!</p>
    <button class="App__Button__2_NDl">Toggle Persons</button>
  </div>
</div>
...
</body>