相关疑难解决方法(0)

Vuetify - CSS在组件内部不起作用(生效)

案例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)

但没有变化.


案例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>
Run Code Online (Sandbox Code Playgroud)

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

vuetify.js

14
推荐指数
1
解决办法
2万
查看次数

如何更改 &lt;v-text-field&gt; 图标的颜色?

在我的<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进行了一些搜索,但在那里找不到合适的选项。

css vue.js vuetify.js

5
推荐指数
2
解决办法
9954
查看次数

标签 统计

vuetify.js ×2

css ×1

vue.js ×1