search

tleunen / react-mdl

React Components for Material Design Lite
https://tleunen.github.io/react-mdl/
MIT License
1.76k stars 255 forks source link

[Question] How to isolate material.css to only react-mdl components #469

Open developer94404 opened 7 years ago

developer94404 commented 7 years ago

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.

brandonmp commented 7 years ago

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)

developer94404 commented 7 years ago

Thanks for your kind suggestions and feedback !