vue中解决el-date-picker更改样式不生效问题

/* 在全局样式文件中添加 */
.el-date-editor .el-input__inner {
  background-color: #f0f0f0; /* 自定义背景色 */
  color: #333; /* 自定义文字颜色 */
}

<template>
  <el-date-picker v-model="date" type="date" placeholder="选择日期"></el-date-picker>
</template>

<style scoped>
/deep/ .el-date-editor .el-input__inner {
  background-color: #f0f0f0; /* 自定义背景色 */
  color: #333; /* 自定义文字颜色 */
}
</style>

<template>
  <el-date-picker v-model="date" type="date" placeholder="选择日期"></el-date-picker>
</template>

<style scoped>
::v-deep .el-date-editor .el-input__inner {
  background-color: #f0f0f0; /* 自定义背景色 */
  color: #333; /* 自定义文字颜色 */
}
</style>

<template>
  <el-date-picker v-model="date" type="date" placeholder="选择日期" class="custom-date-picker"></el-date-picker>
</template>

<script>
import styles from './styles.module.css';

export default {
  data() {
    return {
      date: ''
    };
  },
  computed: {
    customDatePickerClass() {
      return styles['custom-date-picker'];
    }
  }
}
</script>

<style module>
.custom-date-picker {
  .el-input__inner {
    background-color: #f0f0f0; /* 自定义背景色 */
    color: #333; /* 自定义文字颜色 */
  }
}
</style>

<template>
  <el-date-picker v-model="date" type="date" placeholder="选择日期" ref="datePicker"></el-date-picker>
  <button @click="changeStyle">更改样式</button>
</template>

<script>
export default {
  data() {
    return {
      date: ''
    };
  },
  methods: {
    changeStyle() {
      const input = this.$refs.datePicker.$el.querySelector('.el-input__inner');
      input.style.backgroundColor = '#f0f0f0'; // 自定义背景色
      input.style.color = '#333'; // 自定义文字颜色
    }
  }
}
</script>