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

3
votes

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;
}
2
javascriptcssreactjssassnext.js

2 Answers

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

should be what you want.

1
votes

You can use the object key [] syntax.

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