search

roylee0704 / react-flexbox-grid

A set of React components implementing flexboxgrid with the power of CSS Modules.
http://roylee0704.github.io/react-flexbox-grid/
2.93k stars 205 forks source link

Adding prefix to generic .row and .col-* classes #157

Open 7mllm7 opened 6 years ago

7mllm7 commented 6 years ago

Hi,

Love this repo, thanks! 👍

My app is a "embeddable bundle" / widget, that is given to others to embed inside their website. Imagine a JS script that is loaded in a hosting website, and that enables some UI capabilities.

The challenge for me here is to "prefix" my own .row and .col-* classes, imported by this module, in order to avoid conflicts with the hosting website's classes. For example, if I don't do that, and a hosting website has their own style definition of .row, then either I or they will override each other's styles. So I'd want all of this modules classes to become, for example, .my-module-row instead of .row, and therefore minimize the chance for styling overrides.

My React app is created with create-react-app, so don't have much control on my Webpack configuration.

Thanks!

eemeli commented 6 years ago

The feature you're looking for is called CSS Modules. Would recommend that you play with that, and have a look at what the compiled output looks like. To get that to work in CRA, you may need to use its v2 (alpha) branch, available on npm under the next tag.

7mllm7 commented 6 years ago

Thanks for your reply. So far I've tried either updating CRA or ejecting, neither worked - it looks like I'd need to convert my entire project to CSS modules, which is A LOT of work.

Problem is that I made sure to use unique class names for my own classes, but react-flexbox-grid's row, col-* etc. are very common. Is there any way to switch to using CSS modules only for react-flexbox-grid, and keep the rest of my project intact?