elementUI樣式修改未生效問題詳解(掛載到了body標簽上)

更新時間：2023年04月06日 08:58:46 作者：superManee

vue+elementUI項目開發(fā)中,經(jīng)常遇到修改elementUI組件樣式無效的問題,這篇文章主要給大家介紹了關(guān)于elementUI樣式修改未生效問題的相關(guān)資料,掛載到了body標簽上,需要的朋友可以參考下

前言

在使用element-ui庫的時候，有時會需要修改它自帶的css樣式，組件模塊化化編程時一般會用到/deep/方法進行樣式穿透修改，但有些情況/deep/方法也會失效，針對這些情況，下面就以修改elementUi中的DateTimePicker時間選擇器組件樣式來講一下自己的心得。

一、適用范圍

1、修改elementUI自帶樣式

2、/deep/深穿透樣式修改方法失效

3、不污染全局樣式

二、示例

1.目標

假設(shè)業(yè)務需要一個只帶年、月、日、時的時間選擇器（如下圖）

2.實現(xiàn)思路

首先在element-ui庫中進行匹配尋找，發(fā)現(xiàn)沒有與之完全一致的模型，為了省時，可以選擇一個比較接近的模型進行ui改造，這里我選擇的是 el-date-picker時間選擇器

首先看下它本身的樣式：

代碼如下：

  <div>
    <el-date-picker
      v-model="value1"
      type="datetime"
      placeholder="選擇日期時間">
    </el-date-picker>
  </div>

修改自帶樣式方法

找到編譯后element-ui給本時間選擇器定義的div盒子類名（見下圖）

因為不需要圖中分和秒這兩列，所以我們可以在本組件的單獨的樣式文件中標簽中修改為自己需要的樣式

先來個錯誤示范

利用 /deep/ 方法進行樣式穿透修改本時間選擇器樣式

代碼如下（示例）：

<style scoped lang="less">
/deep/.el-picker-panel {
  .el-time-spinner{
    .el-time-spinner__wrapper {
      width: 100% !important;
    }
  }
}
</style>

這樣做后發(fā)現(xiàn)我們所修改的樣式并未生效，原因是因為DateTimePicker 下拉框最終是直接掛載到body標簽上，也就是說它與我們的子組件都是并列關(guān)系，所以我們在定義它的子組件中修改它的樣式會失敗。

接下來展示正確做法

可以在element-ui 中看到DateTimePicker的Attributes中存在一個popper-class屬性，官方介紹中可以利用它可以給DateTimePicker 下拉框的設(shè)置類名

<template>
  <div class="home">
    <el-date-picker
      v-model="value1"
      format="yyyy-MM-dd H"
      value-format="yyyy-MM-dd H"
      type="datetime"
      placeholder="選擇日期時間"
      popper-class='myDatePicker'>
    </el-date-picker>
  </div>
</template>

<script>
export default {
  name: "Home",
  data() {
    return {
      value1:''
    }
  },
};
</script>

<style scoped lang="less">
// 此處寫本組件樣式
</style>

<style lang="less">
/* 注意此處沒有添加scoped屬性，所以全局生效，但是有類名限制，不會與其他類樣式?jīng)_突 */
.myDatePicker {
    .el-time-spinner__wrapper{
      width: 100% !important;
    }
}
</style>

最后看效果