pbyqfq
Last Updated: February 25, 2016
·
707
· gajus
D458bf7a80855c9461d0a76e8f2c76b9

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);
Say Thanks
Respond