求助：无法修改vuejs-datepicker组件的宽度与高度

嘿，这个问题我之前也碰到过！你设置的.startDate样式没生效，核心原因是Vue的scoped样式会给当前组件的元素自动加上一个唯一的属性标记（比如data-v-xxxxxx），而datepicker作为子组件，它内部的DOM元素不会带上这个标记，所以你的样式只能作用到外层的<div class="startDate">，根本渗透不到组件内部的输入框或容器上。

给你几个实用的解决办法，按推荐程度排序：

• 用深度选择器穿透scoped（最推荐）：Vue专门提供了深度选择器来解决这种子组件样式修改的问题，不同预处理器写法不一样：

  • 普通CSS/PostCSS环境，用>>>：

    <style scoped>
    /* 先选中你的父容器，再穿透到组件内部 */
    .startDate >>> .vue-date-picker {
      width: 150px;
    }
    /* 如果要让输入框撑满容器，再加这个 */
    .startDate >>> .vue-date-picker input {
      width: 100%;
      box-sizing: border-box;
    }
    </style>
    

  • Sass/Less这类预处理器，用/deep/或者::v-deep（::v-deep兼容性更好）：

    <style scoped lang="scss">
    .startDate {
      ::v-deep .vue-date-picker {
        width: 150px;
      }
    }
    </style>
    

    小贴士：可以打开浏览器开发者工具，查看datepicker组件内部的根元素类名，确保选择器匹配（通常是.vue-date-picker，但不同版本可能有差异）。

• 给组件传props控制样式（更优雅）：很多UI组件会提供自定义类名的props，比如input-class或者wrapper-class，你可以试试这种写法：

  <div class="startDate">
    <datepicker 
      v-model="startDate" 
      format="YYYY-MM-DD" 
      name="startDate"
      :input-class="{'custom-date-input': true}"
    ></datepicker>
  </div>
  

  然后在scoped样式里直接写这个自定义类：

  <style scoped>
  .custom-date-input {
    width: 150px;
    box-sizing: border-box;
  }
  </style>
  

• 去掉scoped属性（不推荐，慎用）：如果把<style scoped>改成普通的<style>，样式就变成全局的了，你的.startDate .vue-date-picker就能生效，但要注意这会影响整个项目中所有的datepicker组件，除非你给父容器加一个非常独特的类名来避免冲突。

最后再确认下组件注册有没有问题，你引入的是datepicker，要在组件的components选项里注册它：

export default {
  components: {
    datepicker
  },
  data() {
    return {
      startDate: null
    }
  }
}

内容的提问来源于stack exchange，提问作者Ajay