CODEWITHSUNDEEP
javascriptcssreactjssassnext.js
Tamir Hen
Tamir Hen

Reputation: 113

Class names convention for scss using Next.js

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.

Upvotes: 7

Views: 7949

Answers (1)

bonnopc
bonnopc

Reputation: 850

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.

Upvotes: 8

Related Questions