Using kebab-case CSS classnames in CSS/SASS modules when using Next js

Question

I am using SCSS modules for my components in React/Next.js but I can't figure out how to import kebab-case classes.

At the moment, I am just writing all my SCSS classes in camelCase but this isn't ideal as this means I cannot make use of SCSS cascading.

(I'm still learning React am I'm not so great at making dynamic components myself so I am sticking to React Strap for now.)

Essentially, I want to write

.company-logo

instead of:

.companyLogo

EDIT: className={styles['company-logo']} causes an unexpected token error

Here is my Component:

import styles from './styles/Navbar.module.scss'

const NavComponent = (props) => {
  const [isOpen, setIsOpen] = useState(false);

  const toggle = () => setIsOpen(!isOpen);

  return (
    <div>
      <img src="../ss-logo.png" alt="Logo" className={styles.companyLogo}/>
    </div>
  );
}

export default NavComponent;

And my SCSS:

.companyLogo {
  height: 3rem;
}

Stadium

Did u solve this.? – Allison

Answer 1

className={styles['company-logo']}

should be what you want.

Northumberland

Nope, I tried that. It causes an "unexpected token error" :/ – Stadium

Answer 2

You can use the object key [] syntax.

<img src="..." className={styles['company-logo']}`

Rambo

Nope, I tried that. It causes an "unexpected token error" :/ – Stadium

Answer 3

<img src="../ss-logo.png" alt="Logo" className={`${style['company-logo']}`}/>

Cognac

Answer 4

Inline:

<img src="../ss-logo.png" alt="Logo" className={`${styles["company-logo"]}`}/>

Variable:

var logo = classNames({
  [`${styles["company-logo"]}`]: true,
});

return (
  <div>
    <img src="../ss-logo.png" alt="Logo" className={logo} />
  </div>
)

Whitlow

Answer 5

Yes but you will not have autocomplete and go to definition, i am just naming them camelCase in module.css :)

Deidradeidre

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center. – Kaykaya

Answer 6

You can use the bracket notation [] to access object with a dash - separator:

<img className={styles['company-logo']}/>

Additionally, if you want to apply multiple class names, you can use template literals:

<img className={`${styles['company-logo']} ${styles['personal-logo']}`/>

Camfort