覆盖element-ui控件宽高样式记录：el-input、el-date-picker、el-time-picker、el-button

在Vue.js中，如果你想要覆盖Element UI组件的宽度和高度样式，你可以使用深度选择器 >>> 或 /deep/ （根据你的预处理器或Vue版本而定）来确保样式能够穿透组件的作用域。以下是针对el-input、el-date-picker、el-time-picker的样式覆盖示例：

/* 如果你使用的是scoped样式，确保使用深度选择器来影响子组件 */
<style scoped>
.custom-input >>> .el-input {
  width: 200px; /* 设置宽度 */
  /* 设置高度 */
}
 
.custom-date-picker >>> .el-date-picker {
  width: 300px; /* 设置宽度 */
}
 
.custom-time-picker >>> .el-time-picker {
  width: 220px; /* 设置宽度 */
}
</style>

<template>
  <div>
    <!-- 应用自定义样式的控件 -->
    <el-input class="custom-input" placeholder="请输入内容"></el-input>
    <el-date-picker class="custom-date-picker" v-model="date" type="date" placeholder="选择日期"></el-date-picker>
    <el-time-picker class="custom-time-picker" v-model="time" placeholder="选择时间"></el-time-picker>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      date: '',
      time: ''
    };
  }
};
</script>

请注意，如果你使用的是Vue 2.x版本并且没有使用预处理器，你可能需要使用/deep/而不是>>>。如果你使用的是Vue 3.x，那么应该使用>>>。

以上代码中，.custom-input、.custom-date-picker和.custom-time-picker是自定义的类名，你可以根据需要将它们改为任何你想要的名称。在这些类中，你可以设置.el-input、.el-date-picker和.el-time-picker元素的宽度和高度。