1挠铲，工具：VS code + Google chrome
2冕屯，React+dva+antd+less
3，具體步驟
本文主要是使用less來修改默認(rèn)樣式拂苹，以antd中的select選擇器為例子安聘，如圖1。
Select雖然看起來是個(gè)很小的組件瓢棒，但是涉及到了偽類元素浴韭，要修改還是有一點(diǎn)困難的。首先要從瀏覽器入手脯宿，找到select對應(yīng)的樣式念颈，一個(gè)個(gè)調(diào)試，確認(rèn)出影響布局效果的樣式连霉。接下來新建一個(gè).less文件榴芳，然后復(fù)制影響布局效果的類名（注意：某些情況不一定需要全部復(fù)制，比如樹形選擇器）跺撼，如圖3窟感。
然后再在less文件中對樣式做調(diào)整，就不一一列舉了歉井，如圖四柿祈。
關(guān)于:global，我們使用的組件的樣式大部分都是全局樣式哩至，使用局部方式聲明class經(jīng)過編譯后躏嚎，無法與組件的默認(rèn)樣式class匹配，樣式自然就無法進(jìn)行覆蓋憨募，要覆蓋默認(rèn)樣式就需要使用全局樣式紧索。使用global聲明的class，都不會被編譯成哈希字符串也就能夠進(jìn)行覆蓋了菜谣。參考：阮一峰老師的CSS Modules 用法教程珠漂。
接下來把less文件引入需要的文件中，使用import尾膊；import styles from './index.less';
最后,使用className引入到組件中媳危，如圖5，可以看到我再三個(gè)地方引入了這個(gè)樣式冈敛，而且這三個(gè)都有用待笑，為什么需要這么做呢？
當(dāng)我們打開瀏覽器查看元素的時(shí)候會發(fā)現(xiàn)抓谴，antd的組件是很多個(gè)H5標(biāo)簽嵌套形成的暮蹂，不容易確定到底是那個(gè)標(biāo)簽在什么位置起作用寞缝，所以給他們?nèi)刻砑訕邮讲皇橐环N方法，到時(shí)候可以再排除掉沒用的仰泻，減少代碼冗余荆陆。
最最后，效果圖如下：上面是默認(rèn)樣式集侯，下面是修改后的樣式被啼。
