How to limit the CSS only affected in a particular npm package?

Question

Here is a npm package I am using: http://blueprintjs.com/docs/#components.usage

I would like to use their component with CSS, but I don't their CSS affect to my own CSS. Is this possible to allow the CSS package ONLY affected in that npm components? Thanks.

Answer 1

Precisely what @barry-johnson said in his comment above: we use pt- as a namespace for all of our CSS classes to avoid collisions with your own application styles. For instance, you could use your own .custom-button alongside our .pt-button with no conflicts.

However, if you use a Blueprint React component, then it's going to use the Blueprint classes, and you're going to want to use our CSS (because it's not just pretty colors, there's some useful layout stuff in there too). Hope that helps!