在 VueJS 中覆盖子组件的内部类星体组件 CSS

Question

我在 VueJS 中使用类星体组件来制作应用程序。我在父组件中导入了一个子组件。对于孩子，我通过直接在样式标签中访问类星体类来覆盖和应用自定义 css。问题是在父类中导入子项后，父项 css 应用于子项。即使我使用范围、模块或深度它也没有效果，因为我想更改类星体组件内部根 css。

我还尝试在 created() 中在运行时设置孩子的样式，但它没有任何效果，也不接受 !important 关键字。

有什么方法可以在类星体组件根/内部 css 上应用自定义子级 css 而不让父级 css 应用到子级上？请帮忙。

Answer 1

您可以使用 v-deep 在样式部分覆盖 Quasar 的类。

<style scoped lang="scss">
.q-item {
  &::v-deep {
    .q-item__label {
      font-size: 18px;
    }
   
  }
}
</style>

请注意，您的第一个类（在我的示例中为 .q-item）必须是您使用的 Quasar 组件的给定类。如果你使用 q-item 组件，在 Quasar 里面放 q-item__label，在里面 q-item__ 东西......使用 q-item 作为 v-deep 上面的第一个参数，就像我的例子一样。