Os módulos React CSS permitem o mapeamento automático de nomes de classes para módulos CSS dentro dos componentes React.

Todos podemos concordar que os Módulos CSS são fantásticos.

No entanto, sua integração ao React não parece natural:

import React from 'react';
import styles from './car.css';

export default class Car extends React.Component {
    render () {
        return <div className={styles.car}>
            <div className={styles.frontDoor}></div>
            <div className={styles.backDoor}></div>
        </div>;
    }
}

E se pudéssemos simplesmente declarar className como uma string e permitir que um componente de ordem superior faça o mapeamento? Isso é o que o componente react-css-modules faz:

import React from 'react';
import styles from './car.css';
import CSSModules from 'react-css-modules';

class Car extends React.Component {
    render () {
        return <div className='car'>
            <div className='front-door'></div>
            <div className='back-door'></div>
        </div>;
    }
}

export default CSSModules(Car, styles);