Vuetify v-tooltip 无法更改 css

Question

我正在使用 Vuetify 的 v-tooltip，我想对其 CSS 进行细微的更改，例如 opacity: 1 和内部 padding: 0。但我无法更改其上的任何 CSS。有人可以帮忙吗？

.v-tooltip {
    font-size: 50px !important;
    opacity: 1 !important;
}

这是我的 vue 代码：

  <v-tooltip bottom>
    <template v-slot:activator="{ on }">
      <a
        v-on="on"
        @mouseover="mouseOver(item)"
        @mouseleave="mouseLeave(item)"
      >{{ item.name }}</a>
    ...continued

Answer 1

内容位于.v-tooltip__content 下。它也是在元素本身上设置的，所以important 是必需的，因为您已经覆盖了样式。

.v-tooltip__content {
  font-size: 50px !important;
  opacity: 1 !important;
  display: block !important;
}