gajus 0 Newbie Poster

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