如何更改Vuetify日期范围选择器外观？

Question

我正在尝试重新创建these Vuetify date range pickers，其中有2个选择器用于“从”和“到”日期。请注意，它们具有很好的浅蓝色背景色，可以跨越所选范围。我认为只需为选择器设置颜色就足够了：

<v-date-picker
  v-model="datesRange"
  color="green"
  :max="maxDate"
  no-title
  range
  @input="menuFrom = false"
/>

但是，当我创建它时，我只看到范围中日期周围的绿色圆圈。

我在this Codepen中重新创建了该问题。

我试图在上述站点上检查代码，我可以看到在<td>旁边的每个<button>元素下都有这个div：

<div class="date-picker-table__event date-range__date-in-range blue lighten-5"></div>

当我只有按钮时。我不知道他们怎么把这个div放在那儿。

我在文档中找不到任何相关内容。那么，如何才能使选定的日期仅显示为绿色圆圈，而将范围显示为浅绿色背景颜色？

Answer 1

也许这会有所帮助

div.v-picker__body.v-picker__body--no-title {
  background-color: blue !important;
  color: white;
}

位于您的codeopen

您可以像这样调试样式