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