CODEWITHSUNDEEP
javascriptcssreactjssassnext.js
atman_lens
atman_lens

Reputation: 822

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

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;
}

Upvotes: 9

Views: 15626

Answers (6)

Web Allex
Web Allex

Reputation: 31

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

Upvotes: 2

beckblakestrom
beckblakestrom

Reputation: 21

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>
)

Upvotes: 2

Audwin Oyong
Audwin Oyong

Reputation: 2531

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']}`/>

Upvotes: 1

Dmitry
Dmitry

Reputation: 31

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

Upvotes: 3

Didier
Didier

Reputation: 59

You can use the object key [] syntax.

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

Upvotes: 5

徐銘谷
徐銘谷

Reputation: 361

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

should be what you want.

Upvotes: 18

Related Questions