欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

如何修改ant?design組件自帶樣式

 更新時間:2022年12月03日 09:28:55   作者:我要你好好的。  
這篇文章主要介紹了如何修改ant?design組件自帶樣式問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教

修改ant design組件自帶樣式

背景

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

需求

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

解決方法

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

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

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

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

webstorm用戶使用import可能會報錯,請移步至Setting > Language & Frameworks > JavaScript > Webpack 將webpack configuration file路徑切換至:當前項目絕對路徑\node_modules\@vue\cli-service\webpack.config.js,報錯消失。

Notice

根據(jù)我的實驗,直接在組件使用的單頁面模板內(nèi)修改組件內(nèi)部樣式無用,加上/deep/、::v-deep都沒用。

關(guān)于組件內(nèi)部元素的類名,請自行在開發(fā)者工具中檢查,然后再到樣式文件修改(這是最麻煩的地方),建議在sandbox中對單個組件進行試驗后,再到項目修改測試,因為sandbox對樣式的響應比較快。

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

更改antd 默認樣式

更改ant design 默認樣式

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

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

例如:

我想修改司機這一行的高度

在控制臺中找到對應的樣式

將:global放在一個較大的父級容器中

注意::global后不能有空格

.ChartCard :global(.antd-pro-components-charts-chart-card-index-chartCard .antd-pro-components-charts-chart-card-index-total) {
  height: 76px;
}

修改后:

以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。

相關(guān)文章

最新評論