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

Question

这个问题已经有答案了:

Vuetify - CSS not working (taking effect) inside component (1 个回答)

已关闭 5 年前。

我正在尝试修改 vuetify 组件的 css，例如更改 font-size至10px ，但它没有考虑我的类(class)有解决办法吗？

Answer 1

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

您想要做的是使用deep选择器，这样父组件中的样式就会泄漏到子组件中，在本例中是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 。您可以阅读更多相关信息 here in the vue-loader docs