Vue-material: [mdTheme] vs rest of the world

Created on 22 Apr 2017 · 14Comments · Source: vuematerial/vue-material

Hi folks,

I'm commig to Vue-Material from a bit unusual path. I will explain...

I do use official material-components-web but as those guys are catching up, they still miss some basics - like tabs.

Since I do love Vue since it's 0.11 I was happy when I found Vue-Material. I was like...cool, so now I can use material-components-web + vue-material together when I'm gonna actually need Vue components in particular cases. So I can mix these 2 frameworks together, yay!

Well, I was trying hard but there is one big issue with md-theme. It's not 100% 1:1 with material-components-web and it overrides (I've found a few already created tickets) existing design/theme.

So I would like to have whole app (90%) written in material-components-web and the rest (10%) to use vue-material without themes clashing. I came up with this configuration - 2 Vue instances.

new Vue({
    el: "main",
    components: {
        ... my coponents...
    }
});

Vue.use(VueMaterial);
Vue.material.registerTheme("custom", {
    primary: {
        "color": "purple",
        "hue": "A700",
    },
    accent: {
        "color": "lime",
        "hue": "A700",
    },
    warn: "red",
    background: "white"
})
new Vue({
    el: ".md",
});

and then I can use my loved md-tabs just like

.md
    md-theme(md-name="custom")
        md-tabs

Basically I just tried to separate vue-material just for .md containers.

The thing is that vue-material still applies default theme (blue+red) on whole app because it adds md-theme-default class to body tag which still overrides my material-components-web theme.

So...
Is there a way how to force vue-material to apply it's theme just where md-theme is used and not to apply "default" theme to whole app?

bug

Source

im-n1

👍3

Most helpful comment

Hi,
have you found a solution for that?

I ended up removing the bodyclass

document.body.classList.remove('md-theme-default');

But of course this is not optimal. You can see the styles applying for some seconds before the class gets removed.

I also tried to change the vue-material.css by doing something like

my-app {

@import '/css/vue-material.css';
}
`

The problem here is, that this way the custom themes you define won't have any effect.

It would be great if there was a way to define a scope for the whole vue material styles.

devonacid on 27 Apr 2017

👍2

All 14 comments

Hi,
have you found a solution for that?

I ended up removing the bodyclass

document.body.classList.remove('md-theme-default');

But of course this is not optimal. You can see the styles applying for some seconds before the class gets removed.

I also tried to change the vue-material.css by doing something like

my-app {

@import '/css/vue-material.css';
}
`

The problem here is, that this way the custom themes you define won't have any effect.

It would be great if there was a way to define a scope for the whole vue material styles.

devonacid on 27 Apr 2017

👍2

Hi, no I haven't found any solution. I just use more and more "competitor's" solutions...

im-n1 on 28 Apr 2017

Hello @grafa !
I added this issue as a bug and we'll look into it ASAP.
Thank you! :D

pablohpsilva on 11 May 2017

Hi,

cool. Can you please link this ticket in the new bug-one?

Thank you.

im-n1 on 12 May 2017

Which one @grafa ?

pablohpsilva on 14 May 2017

@busyb, @grafa I use this one to remove the entire body styling and its going good.

<script type="text/javascript">
        $(document).ready(function () {
            $("body").removeClass("md-theme-default");
        });
</script>

zapping on 22 May 2017

😕1

@zapping Yes this one works, but the problem is that you can see how the former styles apply before the class gets removed - it is more a hack than a solution :)

devonacid on 22 May 2017

👍1

Try add that in the head so it fires right away. Do not wait for jQuery to be "ready"

(function(H){H.className=H.className.replace(/\bmd-theme-default\b/,'your-theme-flag')})(document.documentElement)

ghost on 17 Jul 2017

If you use v-cloak to the main vue div then you could avoid the former styles flashing before the class gets removed.

https://medium.com/vuejs-tips/v-cloak-45a05da28dc4

zapping on 17 Jul 2017

I'm running into this issue also. The material css styles are pretty heavy handed. E.g

.md-theme-default a:not(.md-button):hover {
    color: #ad1457;
}

There needs to be a better way to scope these styles instead of applying it to the body automatically.

Anyone have a better solution to prevent md-theme component from adding md-theme-default to the body?

jacquescrocker on 26 Oct 2017

I added this callback to my top level Vue app. It's a hack but whatever, I guess it works for now:

mounted: function () {
    this.$nextTick(() => {
      document.body.classList.remove('md-theme-default')
    })
  }

jacquescrocker on 26 Oct 2017

I have to say that in the new version we won't face those problems. We will have a toggle to disable the body class.
This class needs to be set to apply base styles to body tag itself. But there'll be a toggle configuration to change this behavior. True to add a body tag and false to bypass this. All components will be themed no matter what