社区首页 >问答首页 >如何避免Vuetify覆盖默认CSS

问如何避免Vuetify覆盖默认CSS
EN

Stack Overflow用户

提问于 2019-01-21 15:44:40

回答 2查看 4.1K关注 0票数 7

总结问题

我正在尝试将Vuetify实现为现有项目的一部分。但在我将Vuetify添加到项目中之后。我发现类似输入字段，select的“默认”CSS样式被改变了。它使这些输入字段和选择看起来都像纯文本，而不是输入字段和选择。

因为我只想为项目的一部分实现Vuetify，所以Vuetify覆盖了“默认”CSS规则是不好的。

我正在寻找一种方法来实现现有项目的一部分。但项目的其余部分应该呈现为正常(只使用默认CSS，而不是我自己的CSS)。

为了使问题更清晰，我将举一个例子，它显示了两个选择。第一个是用Vuetify <v-select>制作的，第二个是用普通的HTML代码<select>制作的

提供背景资料，并告诉我们你已经尝试过什么

我已经尝试将输入字段的自定义CSS规则和选择后的Vuetify脚本和Vuetify链接。但是Vuetify仍然覆盖了我的自定义CSS样式。

显示你的代码

HTML部件：

<div id="app">
  <div>Vuetify select:</div>
  <v-select
    :items="items"
  >
  </v-select>
  <hr/>
  <div>
    <div>Normal select:</div>
    <select>
      <option value="0">test1</option>
      <option value="1">test2</option>
      <option value="2">test3</option>
    </select>
  </div>
</div>

JS部分：

new Vue({
  el: '#app',
  data() {
    return {
      item: null,
      items: [
        {
          text: "a"
        },
        {
          text: "b"
        },
        {
          text: "c"
        },
      ]
    }
  }
})

描述预期和实际结果

我希望我可以在这个项目的某些部分使用Vuetify。但与此同时，项目的其余部分应该表现得像正常一样(使用默认CSS)。

vuejs2

vuetify.js

javascript

css

CDN&音视频通信出海专场

提供游戏出海、社交娱乐等方案，助力企业抢占出海市场

回答 2

Stack Overflow用户

发布于 2020-04-15 19:23:44

这是由验证重置样式(src/styles/generic/_reset.scss)引起的。

这个问题还有一个问题：https://github.com/vuetifyjs/vuetify/issues/8530。您可以在mkalus中找到一个little postcss hack，它通过包装器隔离必要的样式(将prefix类添加到选择器中)。

在我的例子中，我只需要移除一些元素选择器，不包括我自己添加的那些。这是我使用postcss-filter-rules插件的mkalus解决方案的变体。

我使用了filter选项来过滤选择器。它的描述：

如果函数返回true，则保留

选择器，否则将删除它们。

和keepAtRules选项，以防止不必要的删除：

默认情况下，将删除@font-face和任何空的at-

(过滤后)。要保留特定的at-rules，请为该选项提供一个名称数组。要保留所有at-rules，请使用值true。

vue.config.js (Vue CLI4)：

const autoprefixer = require('autoprefixer')
const filterRules = require('postcss-filter-rules')

module.exports = {
  /* ... */
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          filterRules({
            filter: (selector) => {
              const re = new RegExp(/^(html|body|\*|ul|ol|select|small)(\W|$)/, 'i')
              const exception  = '.vue-global'
              return !re.test(selector) || selector.includes(exception)
            },
            keepAtRules: true
          }),
          autoprefixer
        ]
      }
    }
  }
  /* ... */
}