search

nukeop / react-ui-cards

Ready to use card components for React (rewritten in Typescript)
https://nukeop.github.io/react-ui-cards/
MIT License
237 stars 62 forks source link

Components interfere with other libraries #23

Closed Fabioepb closed 5 years ago

Fabioepb commented 5 years ago

I'm utilizing another library (Reactstrap) for some components, however, when any card from this library is imported, it overwrites my already existing Card components css.

I believe the solution should be not to rely on global css classes, but rather be contained to the specific component, that way this library can co-exist with others.

nukeop commented 5 years ago

They are specific to individual components but I suspect the names are too generic. In particular, I think this class could be causing problems: https://github.com/nukeop/react-ui-cards/blob/master/src/Card/styles.scss#L1

I think I could remedy this by introducing a namespace like .react-ui-cards for all components using the main Card component, which would also allow to style all the card types at the same time. Would that solve the problem?

Fabioepb commented 5 years ago

Yes, that should solve the issue with Reactstrap as the Card name is already in use. I managed to fix it myself for a pet project but it involved changing the names of every class.

nukeop commented 5 years ago

I decided to put in a little more effort and use css modules to add hashes to css classes so there won't be any conflicts.

nukeop commented 5 years ago

It's published as 2.0.0 now.