Search code examples
reactjsreact-css-modules

React CSS modules, inheriting from a common css module

I have a couple of simple React components each using their own React CSS module in their own respective folders. The CSS is basic but I have it working. I'm building with Webpack 2.

My question is how do I share a common piece of CSS from another CSS module into the two React CSS modules ?

I'm not sure if I should have a folder with just the common CSS module in there and then import it into the two React components. If so how do I refer/reference the common CSS.

I've read the docs but I'm still confused.

Is there a way similar to SASS or Less include/composition ?

I understand this may break the pattern of isolated components, but in my simple case I have a bit of CSS that makes a button with slightly transparent boarders, and it'll be nice to have it common to all react components. I suppose I could place this CSS is a common .css file and have Webpack bundle it, then just use it as className={....}

Solution

  • I suppose I could place this CSS is a common .css file and have Webpack bundle it, then just use it as className={....}

    You are true, because actually you're building a single-page application, which means everything will be added together, after that there's just HTML, CSS and javascript. You can declare your CSS styles as usual, then set some className or id in your render method