vue 修改ui框架樣式 匯總 樣式穿透

說明

1规阀、方法一:配置全局的樣式恒序,請查看 vux 怎么用 樣式變量 修改主題配色(vux只是舉個例子,其他的ui框架也可以找找谁撼,看是否有相似的配置)
2歧胁、方法二:全局樣式層級覆蓋。簡單說就和我們平時寫html厉碟、css沒啥區(qū)別喊巍,在index.html引入就行

    .el-input__inner {
        height: 48px;
    }

如果需要使用預(yù)編譯器,直接寫style注意不要加scoped箍鼓,所寫的樣式就是全局樣式崭参,如果有優(yōu)先級問題 就加一個!important

<style>
    .el-input__inner {
        height: 48px  !important;
    }
</style>

3款咖、局部樣式修改
有時候只是單個路由里面的ui框架樣式需要修改何暮,并不想影響全局樣式,首先想到的可能就是....

<style css="less">
.detail{
    .el-input__inner {
        height: 48px;
    }
}
</style>

直接寫style注意不要加scoped铐殃,然后用一個組件最外層的class包裹住海洼,就不會改到所有的組件的樣式了。
重點(diǎn)都是不要加scoped富腊,這個可選 scoped 屬性會自動添加一個唯一的屬性 (比如 data-v-21e5b78) 為組件內(nèi) CSS 指定作用域坏逢,編譯的時候 .list-container:hover 會被編譯成類似 .list-container[data-v-21e5b78]:hover,而ui框架的el并沒有參加這個編譯赘被,所以寫的樣式?jīng)]有生效是整。
那么問題來了,加了scoped是不是就沒辦法修改ui框架的樣式帘腹,答案當(dāng)然是否定的贰盗,有一個名詞叫做“樣式穿透”,寫法也很簡單

<style css="less">
.detail /deep/ .el-input__inner {
        height: 48px;
}
</style>

最初是stylus 的樣式穿透>>>被廣泛使用阳欲,less和sass的文檔很少,搜索很多網(wǎng)站可能會在不起眼的位置有一個/deep/陋率,姑且這樣理解/deep/ 就是less和sass的樣式穿透球化,反正我用的很開心啊,哈哈哈

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末瓦糟,一起剝皮案震驚了整個濱河市筒愚,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌菩浙,老刑警劉巖巢掺,帶你破解...
    沈念sama閱讀 216,651評論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件句伶,死亡現(xiàn)場離奇詭異,居然都是意外死亡陆淀,警方通過查閱死者的電腦和手機(jī)考余,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,468評論 3 392
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來轧苫,“玉大人楚堤,你說我怎么就攤上這事『茫” “怎么了身冬?”我有些...
    開封第一講書人閱讀 162,931評論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長岔乔。 經(jīng)常有香客問我酥筝,道長,這世上最難降的妖魔是什么雏门? 我笑而不...
    開封第一講書人閱讀 58,218評論 1 292
  • 正文 為了忘掉前任樱哼,我火速辦了婚禮,結(jié)果婚禮上剿配,老公的妹妹穿的比我還像新娘搅幅。我一直安慰自己,他們只是感情好呼胚,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,234評論 6 388
  • 文/花漫 我一把揭開白布茄唐。 她就那樣靜靜地躺著,像睡著了一般蝇更。 火紅的嫁衣襯著肌膚如雪沪编。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,198評論 1 299
  • 那天年扩,我揣著相機(jī)與錄音蚁廓,去河邊找鬼。 笑死厨幻,一個胖子當(dāng)著我的面吹牛相嵌,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播况脆,決...
    沈念sama閱讀 40,084評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼饭宾,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了格了?” 一聲冷哼從身側(cè)響起看铆,我...
    開封第一講書人閱讀 38,926評論 0 274
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎盛末,沒想到半個月后弹惦,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體否淤,經(jīng)...
    沈念sama閱讀 45,341評論 1 311
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,563評論 2 333
  • 正文 我和宋清朗相戀三年棠隐,在試婚紗的時候發(fā)現(xiàn)自己被綠了石抡。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 39,731評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡宵荒,死狀恐怖汁雷,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情报咳,我是刑警寧澤侠讯,帶...
    沈念sama閱讀 35,430評論 5 343
  • 正文 年R本政府宣布,位于F島的核電站暑刃,受9級特大地震影響厢漩,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜岩臣,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,036評論 3 326
  • 文/蒙蒙 一溜嗜、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧架谎,春花似錦炸宵、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,676評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至会涎,卻和暖如春裹匙,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背末秃。 一陣腳步聲響...
    開封第一講書人閱讀 32,829評論 1 269
  • 我被黑心中介騙來泰國打工概页, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人练慕。 一個月前我還...
    沈念sama閱讀 47,743評論 2 368
  • 正文 我出身青樓惰匙,卻偏偏與公主長得像,于是被迫代替她去往敵國和親贺待。 傳聞我的和親對象是個殘疾皇子徽曲,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,629評論 2 354

推薦閱讀更多精彩內(nèi)容

  • 1、通過CocoaPods安裝項目名稱項目信息 AFNetworking網(wǎng)絡(luò)請求組件 FMDB本地數(shù)據(jù)庫組件 SD...
    陽明先生_X自主閱讀 15,979評論 3 119
  • 這是我跑步的第八天涧衙。原本打算跑一天歇一天哪工,這樣對身體傷害更小一些奥此。但是運(yùn)動就是讓人上癮的東西,加上本身身體沒有什么...
    森晴小語閱讀 928評論 4 52
  • 吉利汽車總裁李書福說:發(fā)現(xiàn)問題是好事雁比,解決問題是大事稚虎,回避問題是蠢事,沒有問題是壞事偎捎。每個人會碰到很多問題蠢终,每個企...
    培訓(xùn)師田野閱讀 11,631評論 3 3
  • 認(rèn)知,幾乎就是人和人之間唯一的本質(zhì)差別茴她。因?yàn)榧寄苌系牟顒e是可量化的寻拂,不夠熟練,多花時間鉆研就是丈牢。而認(rèn)知上的差距無法...
    Kaiser1818閱讀 466評論 1 50
  • 年前瀏覽京東時己沛,不期然地遇到中信出版社唐詩宋詞版日歷書慌核。年初,心中一動申尼,與自己約定隔天背誦一首詩詞垮卓。今天,打開日歷...
    飛奔的Seven閱讀 357評論 4 10