tleunen
[Question] How to isolate material.css to only react-mdl components
Hi, thanks for your excellent library. This was the first React component library (out of a few others I tried) to successfully 'plug and chug' into my existing custom app structure :)
I am wondering, however (excuse this beginner level question):
How do I 'isolate' the css styles provided by react-mdl/extra/material.css ?
I only want to import material.css to style the React-MDL components only (ie, Button, etc).
However, what is happening is that, as soon as I import material.css, it's styling globally takes over the rest of styles in other react components (such as line spacing increased, mostly, is the only thing I've noticed so far. But I want to prevent possible future problems).
Thanks for any kind advice.
unfortunately there are very few options here as far as i know.
to isolate css, you could normally use a Shadow DOM, but material.js won't work in that instance.
I was using react-mdl in a Chrome extension and had a similar requirement. the only solution I found that could work was to use a custom version of material.css with all of the HTML tag name styles removed (just do a regex search in your editor for ^\w)
