如何在 Vue 中防止来自 UI 框架的全局 css 样式

Question

我正在使用一个名为 Element UI 的 UI 框架，我正在为我的项目使用他们的表格。我需要表格的主体在顶部有一些填充，以便为在行开始之前放在顶部的过滤器输入腾出空间。虽然，并非我项目中的所有表都具有此过滤器输入，因此并非所有表都需要此填充，但我的问题是我的目标是来自 Element UI 的 class（不是我创建的myself) 并且代码确认此选择器的唯一文件位于 App.vue 内。尝试将此样式放在单个文件中是行不通的。我试图只为一个特定文件删除此填充并为所有其他文件保留填充。

App.vue 文件

.el-table__body {
  padding-top: 48px;
}

Answer 1

我用element UI 2年了，遇到了同样的问题。 Element-UI 样式的特点是它们可以在自己的组件中设置样式。

假设您的情况，您可以通过向其添加“自定义class”来仅设置“el-table”的样式，并且仍然可以使用作用域，但是“[=38”中的内容=]" 使用 scoped.

时无法设置样式

如果您真的想要样式，从“样式”中删除“scoped”，如下所示：

<style>
  .el-table__body{
    padding-top: 200px;
  }
</style>

注意： 当您来到此组件时，上述技巧会将样式应用于 所有其他 tables 并且然后打开具有相同“el-table__body”class.

的任何其他组件

为避免影响其他组件的 table 样式，请添加自定义 class 名称，然后定位 el-table__body.

例如：

<el-table
      :data="tableData"
      class="stack-table"
      style="width: 100%">
      <el-table-column
        prop="date"
        label="Date"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="Name"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="Address">
      </el-table-column>
    </el-table>

和 CSS 这样的样式目标：

.stack-table .el-table__body{
   padding-top: 200px;
 }

如何在 Vue 中防止来自 UI 框架的全局 css 样式

How to prevent global css style from UI framework in Vue

css

vue.js

styles

element-ui