相关疑难解决方法(0)

通常在Vuetify中设置一个图标,我们会做类似的事情

<v-icon large color="primary">comment</v-icon> 

我们如何在使用prepend-icon这里的道具时获得相同的效果

<v-list-group prepend-icon="comment">

文档说prepend-icon使用相同的语法,v-icon但没有为我的用例提供具体的例子

选择器的Vuetify组件是:

<v-select
:items="items"
label="Standard"
></v-select>

但是当选择器处于活动状态时,会出现许多嵌套组件(在检查时),例如,下拉菜单本身,menu__content.我该怎么做造型呢？对于"可见"Vuetify组件v-select,我可以手动添加一个类,并直接在css中设置它.但是,我无法为隐藏的组件执行此操作.

我试着用检查给定的类".menu__content"来设置样式,但它似乎不起作用:https://jsfiddle.net/agreyfield91/tgpfhn8m/936/ .

我如何在css中手动设置这些组件的样式？我错过了什么关于vuetify的根本性的东西？

默认情况下，在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 选择器输入组件，v-select我想自定义样式。由于组件v-select在 html 中只呈现一个并且没有必要的子项，我转向通过在 chrome 中检查并复制那里的类来设置组件的样式。例如，要更改活动值的字体大小，我使用了：

.v-select__selections {
    font-size: 20px;
}

这工作得很好，直到我意识到我的样式以这种方式在（通常隐藏的）导航抽屉的任何部分都不起作用。例如，

.v-menu__content {
    height: 500px;
}

不会以任何方式影响样式。奇怪的是，这不仅仅是我的样式被 Vuetify 样式覆盖（！important 没有效果）——看起来我的 CSS 根本没有到达组件。检查时没有任何我的写作风格的痕迹。如何？

我相信这是由于选择器组件的抽屉部分的基于活动的性质。我应该用另一种方式来处理 CSS 中的这些元素吗？我希望我可以提供一个 Jsfiddle，但是（在我找到的模板上），Vuetify 的呈现方式完全不同。我正在使用 Vuetify 1.1.7。

我的样式直接包含在组件 .vue 文件中，无作用域。Vuetify 和 vuetify 样式在 main.js 中导入：

import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
import 'material-design-icons-iconfont/dist/material-design-icons.css'

文件结构（来自 的默认结构vue init webpack -myProject）：

src/
    -main.js 
    -app.vue 
    -components/
        -problematicComponent.vue
index.html

编辑：我也尝试使用深度选择器，但问题仍然存在于隐藏菜单组件中：

>>>.v-menu__content {
    height: 500px;
}

因此，我遇到的问题与这里的问题不同：

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

正如您从 vuetify 的官方文档中看到的，开关的标签有自己的预定义颜色。我如何覆盖它们以获得黑色文本？我将 switch 作为道具从一个名为 form structure 的全局组件传递到另一个我命名为“Primary”的组件中

https://vuetifyjs.com/en/components/selection-controls

<v-switch v-if="externalSwitch" model="switch2":label="externalSwitchLabel"> 
</v-switch>

<v-layout v-for="info in information" :key="info.title">
  <v-flex>
    <form-structure :externalSwitchLabel="`${info.title}`" 
      :externalSwitch="true" :hasSubTitle="true" :subTitle="`${info.status}`" 
      :script="`${info.script}`">
    </form-structure>
  </v-flex>
</v-layout>

我的数组如下所示：

information : [
  {title: "Something1", status:"active", script: "Hello"},
  {title: "Something2", status:"in Progress", script: "Ciao" }
]

我的 CSS 看起来像这样：

<style scoped>
.v-label.theme--light {
  color: black
}
</style>

我正在努力删除列名称“名称”、“数据”、“创建者”旁边的下拉箭头...下拉箭头会呈现在 i-Tag 中，如果我通过 Chrome 编辑 html 并添加“显示” : none' 它被删除了...

但是我无法通过代码中的 css 访问 i 标签或类 v-icon。可能是因为它不是在渲染过程之前创建的。

有没有其他方法可以删除下拉箭头？

提前致谢！

我的表的 Html，称为“文件列表”：

我不是CSS专家,但直到现在我还没有看到这样的"问题".

所以,我正在使用Vuetify并为搜索表单添加了一个..

现在该组件正在创建:

<div input-group input-group--prepend-icon input-group--text-field primary--text>
  <label for="search"></label>
  <div class="input-group__input"></div>
  <div class="input-group__details"></div>
  <div class="input-group__messages"></div>
</div>

现在我的问题是类.input-group__messages有一个最小高度,我希望它在这种情况下有1px或不显示,但我无法从我的组件中编辑它...有办法去根本风格,但我不想这样做,我想学习或知道什么是我错过的问题.

期待有人的回复

我正在尝试修改 vuetify 组件的 css，例如将其更改font-size为10px，但它没有考虑我的类是否有解决方案？

我将vuejs与vuetify一起使用，我放置了一个基本的vuetify模板，并尝试更改Color主题，但是Color不会切换。我的控制台没有收到任何错误，并且我的缓存也被清除了。

main.js代码：

import Vue from 'vue';
import Vuetify from 'vuetify';
import 'vuetify/dist/vuetify.min.css';
import colors from 'vuetify/es5/util/colors';

Vue.use(Vuetify, {
  theme: {
    primary: colors.indigo.base, // #E53935
    secondary: colors.indigo.base, // #FFCDD2
    accent: colors.indigo.base // #3F51B5
  }
});

const app = new Vue({
    el: '#app',
    // ...
});

这就是我的模板的样子。

    <div id="app">
  <v-app light>
    <v-navigation-drawer
      fixed
      v-model="drawerRight"
      right
      clipped
      app
    >
    </v-navigation-drawer>
    <v-toolbar
      dark
      fixed
      app
      clipped-right
    >
      <v-toolbar-side-icon @click.stop="drawer = !drawer"></v-toolbar-side-icon>
      <v-spacer></v-spacer>
      <v-toolbar-side-icon @click.stop="drawerRight = !drawerRight"></v-toolbar-side-icon>
    </v-toolbar>
    <v-content>
      <v-container fluid fill-height>
        <v-layout justify-center align-center> …

我尝试更改 v-slide bar 的高度，我尝试使用组件的指令，但它只更改容器的高度，我还尝试用类覆盖 css

有什么建议？

组件：https : //vuetifyjs.com/en/components/sliders#sliders