Hacker News Reader

Comment by casesandberg | Hacker News Reader

React CSS Modules does not allow you to use props or state to style your component. Say you wanted to use a button <Button color="#aeee00" /> you could map the color prop directly to CSS.

View on HN

There is nothing preventing you from using (React) CSS modules & state/props. Use the allowMultiple option if you need more than one classname (base classname + modifier).

But how does that work if this translates everything to traditional CSS?

You write CSS files and import them in your component. By using Webpack you would do something like this in your component:

    import CSSModules from 'react-css-modules';
    import styles from './styles'; // This is a styles.css file in the same dir
    
    const Component = () => <p styleName="welcome">Hello, world!</p>;

    export default CSSModules(Component, styles);

The stylesheet import is just Webpack doing its thing, using css-loader. Example config: https://github.com/hph/kit/blob/master/webpack.config.js

Sorry if I misunderstood your question.

Reply on news.ycombinator.com