如何使用 Vue.js 库中预定义的 css 类？答案

【问题标题】：How to use predefined css classes from Vue.js libraries?如何使用 Vue.js 库中预定义的 css 类？
【发布时间】：2019-12-23 17:59:46
【问题描述】：

我很少使用 CSS，但我真的很想为我的图表设置样式。该图表来自 vue.js 库，并具有预定义的 CSS 类。我只是不知道如何访问它们。

HTML：

CSS：

文档是这样描述在库中使用 CSS 的：

【问题讨论】：

【解决方案1】：

仅从您分享的图片中很难获得完整的图片。但是覆盖库使用的默认样式应该相对容易。如果你知道类名是什么。

例如：

<style scoped>
year: {
    display: block;
}
</style>

【讨论】：

【解决方案2】：

看看scoped styles docs。

您需要的是一个“深度”选择器。

所以如果你想覆盖子组件的样式，你的 CSS 应该是这样的

.vtc-statistik /deep/ .vtc { 

}

问题是你的作用域样式被编译成

.daten[data-v-bla-bla]{
...
}

b[data-v-bla-bla]{
...
}

/* and .vtc-statistik with nested .vtc */
.vtc-statistik .vtc[data-v-bla-bla] {
...
}

为了按照您期望的方式工作，它应该被编译成

/* */
.vtc-statistik[data-v-bla-bla] .vtc{
...
}

data-v-bla-bla 是组件的唯一 ID。

顺便说一句。嵌套样式不是 CSS 规范的一部分。您应该使用 SCSS / PostCSS / Less 来处理它们。

【讨论】：