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

[7mllm7]

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]

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]

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?