[Feature request]: avoid global styles when using individual components

[nuria-fl]

I'm using the new Vue Material 1.0 beta to add a few components to my app. It's great that I can add the components that I need, as Vue.use(MdCheckbox), but I have to add the global css for the components to display correctly, which sets styles to body, a, etc. This is great if you want your app to be fully Material, but when you only need certain components it can be undesired, and having to override this global styles can be cumbersome (since it uses very specific selectors, like .md-theme-default a:not(.md-button))

I think this should be optional, maybe split into different files, having to import each component style (same way you can import the theming for each component).

[friso-k]

It would be great if the normalization part of in base scss can be removed. I Think this should be the responsibility of a client implementing this. This also allows for better integration when thinking about microfrontends.

[dmnk89]

maybe make md-theme-default added to html optional and require user to manualy add it where material vue is used?

[davidje13]

I would just like to add a +1 to this. I was about to migrate a codebase from material-components-vue to this, but the fact that it has restyled everything on the page (links, fonts, etc.) is just too much for me to deal with, so I gave up (which is a pity because the dialog box handling here is significantly better).

The suggestion from @dmnk89 is exactly what I'm looking for; if I manually remove that style from the html tag, the page works fine. But I can't find any way to avoid adding it in the code (without resorting to horrible hacks!)

[adamlucia]

+1 I'm currently experiencing an issue with this ("vue": "^2.6.13", "vue-material": "^1.0.0-beta-15"). Adding my vue component to a landing page causes css conflicts. Removing "md-theme-default" from the html tag fixes the issue.

edit: I added the code below to my main vue component and the vue components css is no longer interferes with the rest of the page.

mounted: function() {
  //TODO: Bug/hack - remove md-theme-default from html element 
  this.$nextTick(() => {
    document.documentElement.classList.remove('md-theme-default')
  })
}