修改ElementPlus输入框默认样式

下午在用vue3写一个登录的输入框样式，但是elementplus自带的input样式不符合预期，界面背景色是暗色调，输入框是白色有点突兀，于是想着修改一下input的默认样式，一开始就只是选择className然后修改属性

.el-input {
  width: 300px;
  background-color: #283443 !important;
}

但是这样却不生效，继续选择下级className

.el-input {
  width: 300px;
  .el-input__wrapper {
    background-color: #283443 !important;
  }
}

改完保存之后发现还是不行，于是我在极度愤怒的情况下打开了百度，百度到的解释是这样的：

封装组件时通常为了避免组件内部样式对全局样式造成污染，style标签会添加scoped属性，这个属性保证了在当前组件内添加的样式只作用于当前组件，当然，还可以作用于引用组件的根组件。所以呢，这样一来，我们在当前组件内重写子组件内的样式时，是作用不到被引用组件上的

而/deep/的官方解释是当前组件内设置的样式选择器可以作用到子组件上。 此时这个问题就很清晰了，只需要在需要修改的样式中加上/deep/就可以了

.el-input {
  width: 300px;
  /deep/ .el-input__wrapper {
    background-color: #283443 !important;
  }
}

保存修改，看下界面，输入框的背景色已经改变了，完美！