問題描述

vue 文件中的關(guān)鍵代碼差不多就下面這樣

<el-form-item> <el-input v-model='form.name' auto-complete='off' placeholder='手機(jī)號郵箱用戶名' class='login-form-input'></el-input></el-form-item><style> .login-form-input .el-input__inner {border: 0 none;border-bottom: 1px solid #ccc;border-radius: 0px; }</style>

瀏覽器中渲染出來的 html

但是編譯出來的 style不知道為什么選擇器被修改了，加了個(gè)屬性選擇器。

我試了下，只要是寫在 vue文件中的樣式，編譯出來都會加一個(gè)屬性選擇器。這怎么搞？意思是 Element-UI 只能大概定制一下主題，不能改太細(xì)節(jié)的東西？

ps:好吧，應(yīng)該是我自己搭的框架有問題，我的鍋。因?yàn)槲矣?Element-UI 推薦的項(xiàng)目模板『element-starter』就沒問題。但還是想問下為什么會這樣

問題解答

<style scoped>

肯定的一點(diǎn)是可以修改，你肯定是方法不對或者樣式優(yōu)先級沒有element定義的高

樓主想覆蓋element的樣式的話，個(gè)人有那么幾點(diǎn)建議：

通用樣式的覆蓋，比如基色或者element組件通用樣式修改，可以放在一個(gè)css文件（或者是scss等）,在main.js 中 import。element也提供了自定義主題的方式

非通用樣式，業(yè)務(wù)組件的樣式覆蓋可以考慮在vue單文件組件中覆蓋，此時(shí)需要注意，涉及到選擇器優(yōu)先級的問題，部分樣式需要使用style的全局樣式（即不加scoped）,使用全局樣式的時(shí)候盡量添加業(yè)務(wù)組件的根組件選擇器，以免影響其他組件中對element組件的樣式。

可以但是必須優(yōu)先級要高

看錯(cuò)了，，，