相关疑难解决方法(0)

案例1
我们正在尝试将自定义样式应用于渲染的vuetify元素:

<template>
    <v-text-field v-model="name" label="Name" />
</template>

<style scoped>
.input-group__input {
    background: red;
}
</style>

但没有变化.

<template>
    <div v-html="customHTML"></div>
</template>

<script>
export default {
    data: () => ({
        customHTML: `<img src="https://vuetifyjs.com/static/doc-images/carousel/planet.jpg">`;
    })
}
</script>

<style scoped>
img {
    width: 200px;
    height: 200px;
}
</style>

如何将自定义CSS应用于这些元素？

默认情况下，在v数据表的每个非最后一位行之间打印一行。我想修改css以更改该行，例如将其删除。最初，在开发人员控制台中，关于边框底部的css如下所示。

.theme--light.v-table tbody tr:not(:last-child) {
    border-bottom: 1px solid rgba(0,0,0,0.12);
}

我为数据表分配了另一个类“ mytable”：

<v-data-table
        :headers="headers"
        :items="desserts"
        hide-actions
        class="elevation-1 mytable">
    <template slot="items" slot-scope="props">
        <td>{{ props.item.name }}</td>
        <td class="text-xs-right">{{ props.item.calories }}</td>
        <td class="text-xs-right">{{ props.item.fat }}</td>
        <td class="text-xs-right">{{ props.item.carbs }}</td>
        <td class="text-xs-right">{{ props.item.protein }}</td>
        <td class="text-xs-right">{{ props.item.iron }}</td>
    </template>
</v-data-table>

并与CSS我试图修改表

.mytable table tr {
    background-color: lightgoldenrodyellow;
    border-bottom: none;
}

尽管将背景色更改为浅金色黄色，但仍然打印了边框底部。在开发人员控制台中，触摸了删除边框底部的指令。不是背景色。我还必须使用哪个选择器来更改边框底部？使用与主题最初使用的相同的CSS也不起作用。

我想按类覆盖vuetify样式。

例如，从vuetify更改按钮的背景颜色。

因此，我创建了一个带有类的按钮：

<div id="app">
  <v-btn class="some" color="success">Success</v-btn>
</div>

.some {
background-color:red;
}

但是背景色红色被vuetify覆盖。

如何在不使用重要主题的情况下解决此问题？

这是示例：https : //stackblitz.com/edit/vue-js-gpkj6k

我正在尝试从 Combobox 调整错误消息的颜色。我试图覆盖我看到应用的样式，但它只是不坚持。我看到在 Vuetify 中应用样式的正常方法是将 [color]--text 添加到组件，但是我需要做什么来设置错误样式？

<style>
.error--text {
    color:rgb(0, 0, 0) !important;
    caret-color: rgb(2, 0, 0) !important;
}
</style>

编辑：这是问题的再现