Class names convention for scss using Next.js

Question

Seems like an obvious question but I couldn’t find good answers when googled it. When I use scss with Next.js and import component-level scss file, is there a way of writing the name of the class with the normal css convention and then after import it to use JS convention? For example:

// login.module.scss file:
.login-button {
  // some scss styling
}

// Login.js file:
import styles from './login.module.scss'

<button className={styles.loginButton}>Login</button>

Edit: I wanna do that instead of writing loginButton in my scss file because I’m rewriting my react project to Next.js and all my styling files uses ’login-button’ convention.

I don't think you have to use the same name why don't use loginButton in your scss ? — Daphaz
I don't think it is possible. Please check the documentation of css modules. github.com/css-modules/css-modules#naming — chandanchaudhary

bonnopc bonnopc · Accepted Answer · 2021-05-17T07:58:24

The recommended convention is to use camelCase to name your css/scss classNames. But if you still want to use kebab-case for your className, then use it with the bracket notation.

/* component.module.scss */

.login-button {
  /* some scss styling */
}

// component.jsx

<button className={styles['login-button']}>Login</button>

Please follow this link to know more from the documentation.

Class names convention for scss using Next.js

1 Answers