CODEWITHSUNDEEP
cssreactjssassnext.js
Gracie williams
Gracie williams

Reputation: 1145

Use class instead of className in react components

I use next js and mycode like below

import styles from "../components/style/dark.module.scss";

export default function ThemeButton() {
  return (
    <div>
      <button id="dark-mode-toggle" className={styles["dark-mode-toggle"]}>
 
      </button>
      <h1 className={styles["title"]}>
       Title
      </h1>
    enter code here
    </div>
  );
}

Here I am creating an CSS module and importing it and using like above and it works fine.

But everytime I need to type className={styles["dark-mode-toggle"]} instead of just typing class="dark-mode-toggle" , I am migrating from plain html code to React and there are 1000's of class like this.

Is there any way to use class="dark-mode-toggle" and make styles work , without using global styles , I want the styles to be imported only when component is used to make my app lightweight.

Upvotes: 1

Views: 560

Answers (1)

ABakerMTB
ABakerMTB

Reputation: 9

You can use cmd + shift + H in VScode and replace all occurrences in the project.

Upvotes: 0

Related Questions