Vue 修改引用的elementUi组件库样式

修改组件库样式

直接修改组件库样式文件

在项目的node_modules文件夹下找到element-ui组件库，并对组件库中对应的css样式文件进行修改。$\color{red}{不推荐}$

在Vue文件中修改样式

这种方法需要找到要修改的class名

• 使用css
  使用>>>或/deep/修改对应组件样式，如修改按钮样式 el-button

  <style scoped>
      >>> .el-button{
          background-color:#fff;
      }
  </style>
  

  >>>有兼容问题，一般不建议使用

• 使用sass

  • Vue2
    使用/deep/修改对应组件样式，如修改按钮样式 el-button

  <style lang="scss" scoped>
      /deep/ .el-button{
          background-color:#fff;
      }
  </style>
  

  $\qquad$使用::v-deep修改对应组件样式，如修改按钮样式 el-button

  <style lang="scss" scoped>
      ::v-deep .el-button{
          background-color:#fff;
      }
  </style>
  

  • Vue3
    推荐使用:deep(选择器)修改样式，如修改按钮样式 el-button

  <style lang="scss" scoped>
      :deep(.el-button){
          background-color:#fff;
      }
  </style>