Use class instead of className in react components

Question

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.

Since it's JSX, it won't work. However in VSCode you can replace all occurances in a file. — Servesh Chaturvedi
– Servesh Chaturvedi, Commented Aug 28, 2022 at 8:01

ABakerMTB · Accepted Answer · 2022-08-28 10:23:51Z

0

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

answered Aug 28, 2022 at 10:23

ABakerMTB

92 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Use class instead of className in react components

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related