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

Question

我正在使用 VueJS 中的类星体组件来制作应用程序。我在 parent 组件中导入了一个 child 组件。对于 child，我通过直接在其样式标签中访问类星体 classes 覆盖并应用了自定义 css。问题是在 parent class 中导入 child 后，parents css 应用于 child。即使我使用 scope、module 或 deep 它也没有效果，因为我想更改类星体组件内部根 css.

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

有什么方法可以在类星体组件 root/internal css 上应用自定义 child 的 css 而不是让 parent css 申请 child？请帮忙

Answer 1

您必须从您的样式标签中删除范围字段，然后您可以覆盖类星体 classes。因为当您有作用域时，框架会将哈希码附加到您样式中的所有 class 和 id 名称，并且您的 class 名称已更改。

Answer 2

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

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

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

Answer 3

你可以这样。这是覆盖类星体切换组件的示例

<template>
 <q-toggle
      ref="qToggleRef"
      style=""
      outlined
      :disable="props.disable"
      :label="void 0"
      bg-color="grey-1"
    >
     
    </q-toggle>
</template>
<script lang="ts">


//as usual vue code

</script>
<style scoped lang="scss">
  .q-toggle :deep(.q-toggle__track) {
     border-radius: 14px;
      height: 28px;
      width: 48px;
      opacity: .12;
      top: calc(50% - 14px);
  }
  .q-toggle :deep(.q-toggle__thumb) {
    border-radius: 50%;
    height: 20px;
    position: relative;
    width: 20px;
    top: -24px;
    margin-left: - 0.09em;
  }

</style>

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

Override child component's internal quasar components CSS in VueJS

javascript

css

vue.js

quasar-framework