要修改elementUI組件的樣式,可以采用以下兩種方式:
1. 全局樣式:通過選擇權(quán)重覆蓋elementUI組件的樣式,如修改復(fù)選框?yàn)閳A角: 但這種方式為全局樣式,會影響頁面中所有復(fù)選框,如果不希望影響其它頁面的樣式,可以采用第二中方式
2. 局部樣式: 但如果僅僅是設(shè)置了scoped屬性,樣式無法生效,原因是以上樣式會被編譯成屬性選擇器,而elementUI組件內(nèi)部的結(jié)構(gòu)卻無法添加該html屬性,以上樣式被編譯成如下代碼: .edit-item[data-v-6558bc58] .el-checkbox__inner[data-v-6558bc58] { border-radius: 50%; } 解決方案也很簡單,只需在選擇器中要添加 >>>即可 如果是sass或less編寫的樣式,還可以使用 /deep/
以上寫法樣式都會編譯成以下樣式: .edit-item[data-v-6558bc58] .el-checkbox__inner{} 所以elementUI中的樣式就能成功覆蓋