Vuetify-CSS在组件内部不起作用（生效）

Question

案例1

我们正在尝试将自定义样式应用于呈现的vuetify元素：

<template>

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

</template>

<style scoped>

.input-group__input {

    background: red;

}

</style>

但是没有变化。

情况2

我们正在尝试设置由v-html（例如外部html）呈现的元素的样式。例如，我们尝试在上应用自定义的宽度和高度img，但这不起作用：

<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应用于这些元素？