덧붙여 CSS Module과 함께 사용하면 CSS Module 사용이 훨씬 쉬워집니다. classnames에 내장되어 있는 bind 함수를 사용하면 클래스를 넣어 줄 때마다 styles.[클래스 이름] 형태를 사용할 필요가 없습니다. 사전에 미리 styles에서 받아 온 후 사용하게끔 설정해 두고 cx('클래스 이름', '클래스 이름2') 형태로 사용할 수 있습니다.

다음 코드는 우리가 만든 CSSModule 컴포넌트에 classnames의 bind 함수를 적용한 예입니다.

import React from 'react';
import classNames from 'classnames/bind';
import styles from './CSSModule.module.css';
 
const cx = classNames.bind(styles); // 미리 styles에서 클래스를 받아 오도록 설정하고
 
const CSSModule = () => {
return (
  <div className={cx('wrapper', 'inverted')}>
    안녕하세요, 저는 <span className="something">CSS Module!</span>
    </div>
);
};
 
export default CSSModule;

CSS Module을 사용할 때 클래스를 여러 개 설정하거나, 또는 조건부로 클래스를 설정할 때 classnames의 bind를 사용하면 훨씬 편리하게 작성할 수 있겠죠?