<el-date-picker
                  v-if="currentCircle === 'MONTH'"
                  style="margin-right: 20px;"
                  @change="getTypeTotal"
                  v-model="currentDate"
                  value-format="yyyy-MM"
                  format="yyyy-MM"
                  type="month"
                  placeholder=""
                  class="jlpMySelect"
                  popper-class="jlpMySelectPopper"
                ></el-date-picker>



/* 日期 */
// .jlpMySelect 選擇框的樣式  .jlpMySelectPopper下拉出來(lái)的樣式

.jlpMySelect {
  border: 1px solid #05658c !important;
  background-color: #042237 !important;
  height: 45px !important;
  width: 120px;
  border-radius: 4px;
}
.jlpMySelectPopper.el-picker-panel {
  background: #00122a !important;
}
.jlpMySelect .el-input__inner {
  font-size: 24px !important;
  text-align: center;
  background: rgba(80, 136, 151, 0.1) !important;
  border: transparent !important;
  color: #ffffff;
  cursor: pointer;
  height: 47px !important;
  line-height: 100% !important;
}
.jlpMySelectPopper .el-date-table {
  font-size: 30px !important;
}
.jlpMySelectPopper .el-date-range-picker__header div {
  font-size: 30px !important;
}
.jlpMySelectPopper .el-date-picker__header-label,
.jlpMySelectPopper .el-picker-panel__icon-btn,
.jlpMySelectPopper .el-date-table th {
  color: #fff !important;
  font-size: 30px !important;
}
.jlpMySelectPopper .el-input__inner {
  background-color: transparent;
}
.jlpMySelectPopper .el-input--small {
  font-size: 30px !important;
}
.jlpMySelectPopper .el-time-panel {
  background-color: #012649;
}
.jlpMySelectPopper .el-time-spinner__item {
  font-size: 26px;
}
.jlpMySelectPopper .el-time-spinner__item:hover,
.jlpMySelectPopper .el-time-spinner__item:hover:not(.disabled):not(.active) {
  background-color: #78bcff;
}
.jlpMySelectPopper .el-time-panel__footer .cancel {
  font-size: 26px;
  color: #409eff;
}
.jlpMySelectPopper .el-time-panel__footer .confirm {
  font-size: 26px;
}
.jlpMySelectPopper .el-month-table {
  font-size: 26px;
}
.jlpMySelectPopper.el-date-picker {
  width: 450px !important;
}
.jlpMySelectPopper.el-date-picker .el-picker-panel__content {
  width: 420px !important;
}
.jlpMySelectPopper .el-year-table td .cell {
  width: 80px;
  font-size: 30px;
}
.jlpMySelectPopper .el-month-table td .cell {
  width: 80px;
}
.el-date-table td {
  height: 45px !important;
}
.el-date-table td span {
  width: 45px !important;
  height: 45px !important;
  line-height: 45px !important;
}
.el-button--mini {
  font-size: 28px !important;
}
.el-picker-panel__icon-btn:hover {
  color: #78bcff !important;
}
.el-date-table td.in-range div,
.el-date-table td.in-range div:hover,
.el-date-table.is-week-mode .el-date-table__row.current div,
.el-date-table.is-week-mode .el-date-table__row:hover div {
  background-color: #567ebc !important;
}
.el-picker-panel__footer {
  background: #00122a;
}
.el-picker-panel__footer .el-button {
  background: #00122a;
}
.el-picker-panel__footer .el-button:hover {
  background-color: #567ebc !important;
}
.jlpMySelect .el-input__icon {
  line-height: 50px;
}

?首先查看官方文檔，是否提供了類自定義的參數(shù) ，其他組件也是如此

<el-form-item label="日期范圍">
                <el-date-picker
                  v-model="historyChangeTime"
                  @change="historyTimeChange"
                  popper-class="popperClass1" // popperClass1為自定義的類名
                  type="datetimerange"
                  format="yyyy-MM-dd HH:mm:ss"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  range-separator="至"
                  start-placeholder="開始日期"
                  end-placeholder="結(jié)束日期"
                >
                </el-date-picker>
              </el-form-item>

<style lang="css" scoped>
/deep/ div {}
div >>> div 
<style>

<style lang="css">
.popperClass1 { // 需要注意的是一定不要寫在scoped中會(huì)導(dǎo)致樣式無(wú)法生效
  width: 900px;
}
.popperClass1 .el-date-range-picker__header button,
.popperClass1 .el-date-range-picker__header div,
.popperClass1 tr {
  font-size: 22px;
}
.popperClass1{ // 下拉框背景色
    border: 1px solid #3062ff;
    background-color: #00122a;
}
.mySelectPopper .el-date-picker table { //字體
  font-size: 20px;
}
.mySelectPopper .el-input__inner,
.mySelectPopper .el-picker-panel__footer,
.mySelectPopper .el-button,
.mySelectPopper .el-button.is-plain:hover { // 確定按鈕色
  background-color: #00122a !important;
}
.mySelectPopper .el-time-spinner__item:hover:not(.disabled):not(.active) { //二級(jí)下拉框
  background: rgba(80, 136, 151, 0.1) !important;
  font-size: 18px;
}
<style>

第二種效果圖：

?文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-513141.html

?

到了這里，關(guān)于element ui 修改el-date-picker樣式的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！