'what does the square bracket of style in className does

For the code below

import styles from './index.module.scss';
...
return (
        <div
            className={classNames(styles.wrapper, {
                [styles.scrolling]: isScrolling
            })}
            ref={calendarRef}
        >

what does

[styles.scrolling]: isScrolling

achieve?

reactjs

Solution 1:^[1]

classNames helps you to generate class names conditionally

className={classNames(styles.wrapper)} is className="wrapper"

className={classNames(styles.wrapper, styles.scrolling)} is className="wrapper scrolling"

But in some cases, you don't want to have scrolling in your class names, so we have that conditional class name with a true/false value (isScrolling)

className={classNames(styles.wrapper, {
   [styles.scrolling]: true
})}

will generate

className="wrapper scrolling"

className={classNames(styles.wrapper, {
   [styles.scrolling]: false
})}

will generate

className="wrapper"

A side note that styles.wrapper and styles.scrolling are like variables, so they will be possibly hashed or uglified on production

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Nick Vu

'what does the square bracket of style in className does

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]