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

Posted 2023-02-22

【中文标题】如何在Vue中防止UI框架中的全局css样式

【英文标题】：How to prevent global css style from UI framework in Vue

【发布时间】：2021-06-11 01:56:26

【问题描述】：

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

App.vue 文件

.el-table__body 
  padding-top: 48px;

【问题讨论】：

vue SFC 中的范围样式包含有问题的元素，使用适当的选择器将为您解决该问题。

在您打算修改值的 SFC 中，<style scoped> .el-table__body padding-top: 48px </style> 将转换为该组件中该元素的特定选择器，从技术上讲，该选择器不会影响其他组件。现在，因为它是嵌套组件中的一个元素，您可能需要更具体的内容，例如 deep selector

【参考方案1】：

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

假设您的情况，您可以通过向其添加“自定义类”来设置“el-table”的样式，并且仍然可以使用作用域，但是当您使用 时，“el-table__body”中的内容无法设置样式范围。

如果你真的想要样式，从“style”中删除“scoped”，像这样：

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

注意：当你来到这个组件时，上述技巧会将样式应用于所有其他表格，然后打开任何其他具有相同“el-table__body”的组件" 类。

为避免影响其他组件的表格样式，添加自定义类名，然后定位到el-table__body。

例如：

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

而 CSS 样式目标是这样的：

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