How to change the default style of ElementUI

1. Add styles without scoped (there can be multiple

<style lang='scss'>
	.el-button{
    
    
		background-color: red;
	}
</style>

2. With scoped, native css writing method: use >>> ( >>> can be preceded by a parent element or an ancestor element)

<style scoped>
.buttonWrapper >>> .el-button{
    
    
    background-color: red;
}
</style>

3. Scss, sass, and less used in the project can all use /deep/

<style lang='scss' scoped>
/deep/ .el-button{
    background-color: blue;
}
</style>

or : :v-deep

<style lang='scss' scoped>
::v-deep .el-button{
    background-color: gold;
}

When a page has multiple identical components, to avoid polluting the style of a page, you can also use the combination selector to precisely modify the style of individual components

<style lang='scss' scoped>
/deep/ .buttonWrapper .el-button{
      background-color: red;
  }
</style>