Class names convention for scss using Next.js

user_12168347 0
Viewed 2775

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.

next.js reactjs sass css javascript
1 Answers

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.

user_74301180
Related