CODEWITHSUNDEEP
javascripthtmlcssreactjs
Lee Ren Jie
Lee Ren Jie

Reputation: 55

Adding two kebab case css class in an element in react

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.

Upvotes: 0

Views: 878

Answers (3)

hotcakedev
hotcakedev

Reputation: 2504

You can also use clsx.

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

Upvotes: 0

Edvards Niedre
Edvards Niedre

Reputation: 700

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

Upvotes: 0

Lee Ren Jie
Lee Ren Jie

Reputation: 55

Solved it with:

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

Upvotes: 1

Related Questions