Sometimes, we want to fix className styles not working in React and JavaScript.

In this article, we’ll look at how to fix className styles not working in React and JavaScript.

How to fix className styles not working in React and JavaScript?

To fix className styles not working in React and JavaScript, we can import the styles file as a module.

For instance, we write:

styles.module.scss

.app {
  font-family: sans-serif;
  text-align: center;
}

to add some classes with styles into a styles file.

Then in the same folder, we write:

App.js

import React from "react";
import styles from "./styles.module.scss";

export default function App() {
  return <div className={styles.app}>hello world</div>;
}

to import the styles module as a default export.

Next, we reference the app class in styles.module.scss with styles.app.

Conclusion

To fix className styles not working in React and JavaScript, we can import the styles file as a module.