修改ant design組件自帶樣式

背景

Vue-CLI創(chuàng)建的項(xiàng)目

需求

把走馬燈的面板指示點(diǎn)（如圖1）改成真正的點(diǎn)（如圖2）

解決方法

走馬燈自帶面板指示點(diǎn)類名dotsClass = "slick-dots"，考慮到項(xiàng)目中可能多處會用到走馬燈，請自行更改類名（我的項(xiàng)目只有一處用到，故不想改）

在src/assets/style/（這個(gè)是我用來放全局樣式文件目錄）下新建一個(gè).css文件（其它類型的stylesheet文件也可以用，但我沒試過），再次強(qiáng)調(diào)，如同一組件須多次使用、且樣式要求不同，請自行更改類名，樣式文件也請分開創(chuàng)建，注意互相覆蓋問題。

在需要用到此樣式的<style></style>內(nèi)引入該文件，如下

<style lang='scss' scoped>
@import '~@/assets/style/carousel.css';?? ??? ?//我不確定其他樣式語言是否支持@import
</style>

webstorm用戶使用import可能會報(bào)錯(cuò)，請移步至Setting > Language & Frameworks > JavaScript > Webpack 將webpack configuration file路徑切換至：當(dāng)前項(xiàng)目絕對路徑\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)部元素的類名，請自行在開發(fā)者工具中檢查，然后再到樣式文件修改（這是最麻煩的地方），建議在sandbox中對單個(gè)組件進(jìn)行試驗(yàn)后，再到項(xiàng)目修改測試，因?yàn)閟andbox對樣式的響應(yīng)比較快。

自己預(yù)設(shè)的其他全局樣式對組件沒用（至少我的是這樣），如*{ box-sizing: border-box; }，需要在剛剛建的單獨(dú)樣式文件里重新申明。

更改antd 默認(rèn)樣式

更改ant design 默認(rèn)樣式

如果提供的api可以修改樣式，則可以通過api直接修改。

如果提供的api達(dá)不到想要的效果，可以通過className的方式來修改樣式。

例如：

我想修改司機(jī)這一行的高度

在控制臺中找到對應(yīng)的樣式

將:global放在一個(gè)較大的父級容器中

注意：: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è)參考，也希望大家多多支持腳本之家。

最新評論