You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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!
The text was updated successfully, but these errors were encountered:
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.
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?
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!
The text was updated successfully, but these errors were encountered: