Vuetife overwrite components scoped styles

Question

I create an application using Vuetify. One component should display a schedule that is created using dxhtmlScheduler. But global Vuetify styles overwrite local dxhtmlScheduler styles and therefore the schedule is not displayed correctly. How to make dxhtmlScheduler styles a particular component had a higher priority than the styles Vuetify?

<template >

<div id="scheduler_here" class="dhx_cal_container" style='width:100%; height:100%;'>
<div class="dhx_cal_navline">
  <div class="dhx_cal_prev_button">&nbsp;</div>
  <div class="dhx_cal_next_button">&nbsp;</div>
  <div class="dhx_cal_today_button"></div>
  <div class="dhx_cal_date"></div>
  <div class="dhx_cal_tab" name="day_tab"></div>
  <div class="dhx_cal_tab" name="week_tab"></div>
  <div class="dhx_cal_tab" name="month_tab"></div>
</div>
<div class="dhx_cal_header"></div>
<div class="dhx_cal_data"></div>

</template>

<script>
import 'dhtmlx-scheduler'


export default {
name: "Scheduler",
mounted() {
  scheduler.init("scheduler_here");
   }
}
</script>

<style   scoped>
    @import "../../node_modules/dhtmlx-scheduler/codebase/dhtmlxscheduler_material.css";
</style>

score 1 · Answer 1 · answered Jan 31 '19 at 13:52

The markup generated by dhtmlxScheduler lives outside vue component scope, so I don't think scoped styles would work with it.

Try removing scoped attribute from your style declaration

<style>
    @import "../../node_modules/dhtmlx-scheduler/codebase/dhtmlxscheduler_material.css";
</style>

Here is a related github issue https://github.com/vuejs/vue-loader/issues/559

Explanation:

Vue adds a special data-v-xxxxxxx attribute to html elements created by your component.

Vue css-loader in its turn modifies selectors in scoped css in order to explicitly match elements inside your component and nothing outside.

So .dhx_cal_event_line { background: blue; } in dhtmlscheduler.css becomes .dhx_cal_event_line[data-v-xxxxxxx] { backtround: blue; } when loaded to the page. Such style is supposed to only affect a component with the matching value of data-v attribute.

The problem is, DOM elements of dhtmlxscheduler are created by the library code outside the vue component knowledge, they don't have vue data-v-xxxxxxx attributes, thus scoped css selectors no longer matches them.

Thus, you'll have to load scheduler css as a global style.

There is maybe a better solution, but unfortunately, I don't know it.

Vuetife overwrite components scoped styles

1 Answers1