相关疑难解决方法(0)

我尝试从 Vuetify 中的 v-input、v-text 或 v-autocomplete 文件中删除下划线，但我找不到如何

有什么方法可以从 Vuetify 中的 v-input、v-text 或 v-autocomplete 文件中删除下划线。

情况：

在我的 Vue 应用程序中，我使用aws 身份验证器来处理登录/注册。
我需要自定义样式，但是由于它的结构是由 shadow DOM 构成的，所以有点棘手。

修改变量：

到目前为止，我只设法修改了一些放大变量。

我是这样做的：

:root {
  --amplify-background-color: transparent;
  --amplify-secondary-color: white;
  --amplify-primary-contrast: white;
  --amplify-primary-color: #E00C1D;
}

边注。定位amplify-sign-in而不是:root也可以工作，但从逻辑上讲，该样式仅适用于登录表单，而不适用于注册 ( amplify-sign-up) 表单。
自定义样式定位:root适用于登录和注册表单。

自定义输入字段：

这是我卡住的地方。输入中文本的颜色由--amplify-secondary-colorvar给出 ，在我的情况下需要为白色。但是这样输入的文本在白色背景上是不可见的。

这是 .html 的结构amplify-sign-in。在input里面amplify-input。

这是.input班级的风格。如您所见，颜色由--colorvar控制

这就是--colorvar 所指的：

我的尝试：

我尝试了几种方法，但都没有奏效。我试图针对.input课堂上，input中，amplify-input或改变--color变种。

这些是一些尝试：

:host {
  --color: red !important;
}

:host(.input) {
  color: …

有没有办法增加 bootstrap vue 中工具提示的宽度。我有一个重要的声明要显示在工具提示中。并且工具提示将消息显示为连续三个单词。所以工具提示的高度更大，宽度更小。

<div>
  <span id="disabled-wrapper" class="d-inline-block" tabindex="0">
    <b-button variant="primary" style="pointer-events: none;" disabled>Disabled button</b-button>
  </span>
  <b-tooltip target="disabled-wrapper">jasfkjsdfsdafiads uhsdifumasb jhgasd  asd ua d uiuud  iad iadh ad ihhad ad aid ia dia id ai did ai d a ushdufsd ushd iufads fiuash dfias d uusahdfiusahifu ais fisadu fius fsuhdfushfisafh isaf hisauhfisa hhfish fiushf iush fisu hfisuh fis hfius hfius stooltip</b-tooltip>
</div>

我似乎无法删除 Vuetify 中可扩展数据表中的框阴影。我尝试通过添加box-shadow: none甚至使用内联CSS

<style scope>
.v-data-table__expanded .v-data-table__expanded__content {
  box-shadow: none;
}

我还尝试在数据表中使用，elevation="0"希望它能起作用，但无济于事，它仍然不起作用。谁能帮我？

这是目前的样子：

我刚刚使用了 vuetify 中的代码，但为了方便起见，这是代码：

    <div class="my-6">
      <v-text-field
        v-model="search"
        label="Search"
        class="mx-4"
        prepend-inner-icon="mdi-magnify"
        outlined
        dense
        hide-details
      ></v-text-field>
    </div>
    <template>
      <v-data-table
        :headers="dessertHeaders"
        :items="desserts"
        :single-expand="true"
        :expanded.sync="expanded"
        item-key="name"
        dense
        show-expand
        :search="search"
        :custom-filter="filter"
        elevation="0"
      >
        <template v-slot:expanded-item="{ headers, item }" elevation="0">
          <td :colspan="headers.length" elevation="0">More info about {{ item.name }}</td>
        </template>
      </v-data-table>
    </template>

我可以覆盖所有项目的 sass 变量。我在文件里做的src/sass/variables.scss。在此之前我创建了sass文件夹和该文件。正如我所说，它有效，我可以覆盖整个项目中该文件中的变量。但我只需要重写组件的必要变量。我尝试这样做：

<style lang="sass">
  $btn-text-transform: lowercase         //by default uppercase
</style>

@import '~vuetify/src/components/VBtn/_variables.scss'我也尝试在变量之前或之后添加。但这不起作用。我究竟做错了什么？我该怎么做？

如何使用vue-loader使用范围限定的CSS为v-html内容设置样式？

简单示例：component.vue

<template>
  <div class="icon" v-html="icon"></icon>
</template>
<script>
  export default {
    data () {
      return {icon: '<svg>...</svg>'}
    }
  }
</script>
<style scoped>
  .icon svg {
    fill: red;
  }
</style>

产生HTML <div data-v-9b8ff292="" class="icon"><svg>...</svg></div>

生成CSS .info svg[data-v-9b8ff292] { fill: red; }

如您所见，v-html内容没有data-v属性，但是生成css具有svg的data-v属性。

我知道这是vue-loader的预期行为（https://github.com/vuejs/vue-loader/issues/359）。并在本期中提到了后代选择器。但是如您所见，我在CSS中使用了它，但是它没有用。

如何为v-html内容设置样式？

如何将Vue.js作用域样式应用于通过加载的组件<view-router>.

这是我的代码:

<template>
  <div id="admin">
    <router-view></router-view>
  </div>
</template>

<style lang="scss" scoped>
#admin {
  .actions {
    display: none;
    span {
      cursor: pointer;
    }
  }
}
</style>

当我访问/posts一个名为的组件Posts将被加载时,在这个组件里面我有一个

<div class="actions">
  some content
</div>

问题是定义的样式#admin不适用于.action元素.没有作用域时,这很好用.#admin组件样式的问题出现了scoped.

在将.actions样式保留在admin组件范围样式标记内时,有没有办法做到这一点？