Adding two kebab case css class in an element in react

Question

import React from 'react';
import styles from './stylesheet.moudle.css'

<div className={styles['first-style'] styles['second-style']}>
some content
</div>

How do I add styles['second-style'] into the className? I tried comma and it does not work.

Answer 1

Solved it with:

<div className={`${styles['first-style']} ${styles['second-style']}`}>

Answer 2

I prefer using classnames npm module https://www.npmjs.com/package/classnames

You can do more complex things with this in a clean way.

import classNames from 'classNames'

const condition = true;

<div className={
  classNames(
     styles.first-style,
     styles.second-style,
     {'styles.some-other-conditional-classname': condition})}>

Answer 3

You can also use clsx .

const Toolbar = ({
  className,
  ...rest
}) => {
    <Component
      className={clsx(classes.root, className)}
      {...rest}
    >
    ...
}