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

一、適用范圍

1、修改elementUI自帶樣式

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

3、不污染全局樣式

二、示例

1.目標(biāo)

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

2.實(shí)現(xiàn)思路

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

首先看下它本身的樣式：

代碼如下：

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

修改自帶樣式方法

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

因?yàn)椴恍枰獔D中分和秒這兩列，所以我們可以在本組件的單獨(dú)的樣式文件中標(biāo)簽中修改為自己需要的樣式

先來個錯誤示范

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

代碼如下（示例）：

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

這樣做后發(fā)現(xiàn)我們所修改的樣式并未生效，原因是因?yàn)镈ateTimePicker 下拉框最終是直接掛載到body標(biāo)簽上，也就是說它與我們的子組件都是并列關(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>

最后看效果