React CSS Modules enables automatic mapping of class names to CSS modules inside of React components.

We can all agree that CSS Modules are awesome.

However, their integration to React does not feel 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>;
    }
}

What if we could simply declare className as a string and allow a higher order component to do the mapping? Thats what react-css-modules component does:

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