How to prevent global css style from UI framework in Vue

user_11882174 0
Viewed 624

I'm using a UI framework called Element UI and I'm using their tables for my project. I need the body of the tables to have some padding at the top to make room for a filter input that is put at the top before the rows begin. Although, not all tables in my project will have this filter input so not all tables need this padding, my issue is that I'm targeting a class that comes from Element UI (not one that I created myself) and the only file that the code acknowledges this selector is within App.vue. Trying to put this styling in the individual files doesn't work. I'm trying to only remove this padding for one certain file and keep the padding for all others.

App.vue file

.el-table__body {
  padding-top: 48px;
}
element-ui vue.js css styles
1 Answers

I have been using element UI for 2 years, and I had the same problem. The thing in Element-UI styles is that they can be styled inside their own component.

Let's say for your case, you can style only the "el-table" by adding "custom class" to it and still can use scoped, but what's inside "el-table__body" cannot be styled when you use scoped.

And if you really want to style, remove "scoped" from "style", like this:

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

Note: the above trick will apply the styles to all other tables when you come to this component and then open any other component which has the same "el-table__body" class.

To avoid the effect on other component's tables style, add a custom class name and then target the el-table__body.

For example:

<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>

And CSS style target like this:

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