案例1
我们正在尝试将自定义样式应用于渲染的vuetify元素:
<template>
<v-text-field v-model="name" label="Name" />
</template>
<style scoped>
.input-group__input {
background: red;
}
</style>
Run Code Online (Sandbox Code Playgroud)
但没有变化.
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>
Run Code Online (Sandbox Code Playgroud)
如何将自定义CSS应用于这些元素?
在我的<v-toolbar>组件中,我想设置一个带有图标搜索的文本字段搜索:
<v-text-field
solo-inverted
prepend-icon="search"
label="Search"
class="hidden-sm-and-down"
>
</v-text-field>
Run Code Online (Sandbox Code Playgroud)
这有效,但它给了我这个我不喜欢的结果:
我不喜欢它,因为我想要白色的文本字段和图标,所以我background-color="white" 在前面的代码中添加了该属性:
<v-text-field
background-color="white"
solo-inverted
prepend-icon="search"
label="Search"
class="hidden-sm-and-down"
>
</v-text-field>
Run Code Online (Sandbox Code Playgroud)
这给了我一半我想要的:
如何将该图标的颜色更改为白色?
我对Vuetify.js API进行了一些搜索,但在那里找不到合适的选项。