修改文本字段的css或在vuetify组件中选择

Question

我正在尝试修改 vuetify 组件的 css，例如将其更改font-size为10px，但它没有考虑我的类是否有解决方案？

Answer 1

我假设您正在使用其中一种预处理器（SASS 或 Stylus）。所以问题是你可能有样式部分scoped，例如<style lang="scss" scoped>。

您想要做的是使用深度选择器，这样来自父组件的样式将泄漏到子组件中，在这种情况下是vuetify组件。

这可以在 sass 中实现，如下所示：

<template>
    <div class="button-wrapper">
         <v-btn color="success">Success</v-btn>
    </div>
<template>

然后在样式标签中：

<style lang="scss" scoped>
    .button-wrapper /deep/ button{
        background: #00e389;
        color: #fff;
    }
</style>

• 注意：我不使用 Stylus，但如果我没有记错的>>>话，在这种情况下，deep 的语法就是这样，它将是.button-wrapper >>> button. 你可以在 vue-loader 文档中阅读更多关于它的信息