Vuetife перезаписывает компоненты в областях видимости

Question

Я создаю приложение, используя Vuetify. Один компонент должен отображать расписание, созданное с использованием dxhtmlScheduler. Но глобальные стили Vuetify перезаписывают локальные стили dxhtmlScheduler, поэтому расписание отображается некорректно. Как сделать так, чтобы стили dxhtmlScheduler у определенного компонента имели более высокий приоритет, чем стили 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>

Answer 1

Разметка, сгенерированная dhtmlxScheduler, находится за пределами области видимости компонента vue, поэтому я не думаю, что стили с заданной областью будут работать с ней.

Попробуйте удалить scoped атрибут из вашего объявления стиля

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

Вот связанная проблема github https://github.com/vuejs/vue-loader/issues/559

Пояснение:

Vue добавляет специальный data-v-xxxxxxx атрибут html-элементов, созданных вашим компонентом.

Vue css-loader, в свою очередь, изменяет селекторы в области CSS, чтобы явно сопоставлять элементы внутри вашего компонента и ничего снаружи.

Так .dhx_cal_event_line { background: blue; } в dhtmlscheduler.css становится .dhx_cal_event_line[data-v-xxxxxxx] { backtround: blue; } при загрузке на страницу. Предполагается, что такой стиль влияет только на компонент с соответствующим значением data-v приписывать.

Проблема в том, что DOM-элементы dhtmlxscheduler создаются библиотечным кодом вне знания компонента vue, они не имеют vue data-v-xxxxxxx атрибуты, таким образом область действия селекторов CSS больше не соответствует им.

Таким образом, вам придется загружать планировщик CSS в качестве глобального стиля.

Возможно, есть лучшее решение, но, к сожалению, я его не знаю.