To modify the style of the elementUI component, you can use the following two methods
1. Global styles
Override the style of the elementUI component by selecting the weight, such as modifying the check box to rounded corners:
<style>
.edit-item .el-checkbox__inner {
border-radius: 50%;
}
</style>
However, this method is a global style, which will affect all check boxes on the page. If you do not want to affect the styles of other pages, you can use the second method
2. Partial styles
<style scoped>
.edit-item .el-checkbox__inner {
border-radius: 50%;
}
</style>
However, if only the scoped attribute is set, the style cannot take effect, because the above style will be compiled into an attribute selector, but the internal structure of the elementUI component cannot add the html attribute, and the above style will be compiled into the following code:
.edit-item[data-v-6558bc58] .el-checkbox__inner[data-v-6558bc58] {
border-radius: 50%;
}
>>>The solution is also very simple, just add in the selector
<style scoped>
.edit-item >>> .el-checkbox__inner {
border-radius: 50%;
}
</style>
If it is written in sass or less, you can also use/deep/
<style scoped lang="scss">
.edit-item /deep/ .el-checkbox__inner {
border-radius: 50%;
}
</style>
The above writing styles will be compiled into the following styles:
.edit-item[data-v-6558bc58] .el-checkbox__inner{
}
So the style in elementUI can be successfully overwritten