如何修改ant?design組件自帶樣式
修改ant design組件自帶樣式
背景
Vue-CLI創(chuàng)建的項(xiàng)目
需求
把走馬燈的面板指示點(diǎn)(如圖1)改成真正的點(diǎn)(如圖2)
解決方法
走馬燈自帶面板指示點(diǎn)類名dotsClass = "slick-dots",考慮到項(xiàng)目中可能多處會(huì)用到走馬燈,請(qǐng)自行更改類名(我的項(xiàng)目只有一處用到,故不想改)
在src/assets/style/(這個(gè)是我用來放全局樣式文件目錄)下新建一個(gè).css文件(其它類型的stylesheet文件也可以用,但我沒試過),再次強(qiáng)調(diào),如同一組件須多次使用、且樣式要求不同,請(qǐng)自行更改類名,樣式文件也請(qǐng)分開創(chuàng)建,注意互相覆蓋問題。
在需要用到此樣式的<style></style>內(nèi)引入該文件,如下
<style lang='scss' scoped> @import '~@/assets/style/carousel.css';?? ??? ?//我不確定其他樣式語言是否支持@import </style>
webstorm用戶使用import可能會(huì)報(bào)錯(cuò),請(qǐng)移步至Setting > Language & Frameworks > JavaScript > Webpack 將webpack configuration file路徑切換至:當(dāng)前項(xiàng)目絕對(duì)路徑\node_modules\@vue\cli-service\webpack.config.js,報(bào)錯(cuò)消失。
Notice
根據(jù)我的實(shí)驗(yàn),直接在組件使用的單頁面模板內(nèi)修改組件內(nèi)部樣式無用,加上/deep/、::v-deep都沒用。
關(guān)于組件內(nèi)部元素的類名,請(qǐng)自行在開發(fā)者工具中檢查,然后再到樣式文件修改(這是最麻煩的地方),建議在sandbox中對(duì)單個(gè)組件進(jìn)行試驗(yàn)后,再到項(xiàng)目修改測(cè)試,因?yàn)閟andbox對(duì)樣式的響應(yīng)比較快。
自己預(yù)設(shè)的其他全局樣式對(duì)組件沒用(至少我的是這樣),如*{ box-sizing: border-box; },需要在剛剛建的單獨(dú)樣式文件里重新申明。
更改antd 默認(rèn)樣式
更改ant design 默認(rèn)樣式
如果提供的api可以修改樣式,則可以通過api直接修改。
如果提供的api達(dá)不到想要的效果,可以通過className的方式來修改樣式。
例如:
我想修改司機(jī)這一行的高度
在控制臺(tái)中找到對(duì)應(yīng)的樣式
將:global放在一個(gè)較大的父級(jí)容器中
注意::global后不能有空格
.ChartCard :global(.antd-pro-components-charts-chart-card-index-chartCard .antd-pro-components-charts-chart-card-index-total) { height: 76px; }
修改后:
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue實(shí)現(xiàn)給div綁定keyup的enter事件
這篇文章主要介紹了vue實(shí)現(xiàn)給div綁定keyup的enter事件,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-07-07vue.js 使用v-if v-else發(fā)現(xiàn)沒有執(zhí)行解決辦法
這篇文章主要介紹了vue.js 使用v-if v-else發(fā)現(xiàn)沒有執(zhí)行解決辦法的相關(guān)資料,需要的朋友可以參考下2017-05-05vue中radio單選框如何實(shí)現(xiàn)取消選中狀態(tài)問題
這篇文章主要介紹了vue中radio單選框如何實(shí)現(xiàn)取消選中狀態(tài)問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-05-05前端vue+elementUI如何實(shí)現(xiàn)記住密碼功能
這篇文章主要給大家介紹了關(guān)于vue+elementUI如何實(shí)現(xiàn)記住密碼功能的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-09-09vue項(xiàng)目中vue-echarts講解及常用圖表實(shí)現(xiàn)方案(推薦)
這篇文章主要介紹了vue項(xiàng)目中vue-echarts講解及常用圖表方案實(shí)現(xiàn),主要針對(duì)代碼示例中的內(nèi)容進(jìn)行問題講解,詳細(xì)代碼在文章中給大家提到,需要的朋友可以參考下2022-09-09案例實(shí)操vue事件修飾符帶你快速了解與應(yīng)用
這篇文章主要介紹了vue常見的事件修飾符,在平時(shí)無論是面試還是學(xué)習(xí)工作中都會(huì)經(jīng)常遇到的,本文就帶你快速上手,需要的朋友可以參考下2023-03-03Vue組件通信中非父子組件傳值知識(shí)點(diǎn)總結(jié)
在本篇文章里小編給大家整理的是關(guān)于Vue組件通信中非父子組件傳值知識(shí)點(diǎn)總結(jié),有興趣的朋友們學(xué)習(xí)下。2019-12-12