Antd組件中單選框、複選框自定義樣式的優雅實現

表單組件的樣式控制算是antd組件使用的一大坑了。

.以antd-mobile爲例，checkbox選中與非選中狀態是由Input包裹的父元素的‘.am-checkbox-checked’來控制的

未選中時的DOM結構（沒有am-checkbox-checked）

選中時的DOM結構（有am-checkbox-checked類名）

然而一般狀況下選中和非選中的時候咱們須要改變的是  class="am-checkbox-wrapper" 的樣式，

這時候問題就變成了  子元素改變，父元素須要跟着改變，用css目前爲止還不能實現，因爲瀏覽器的渲染機制，父選擇器的出現幾乎還不可能，在我優化代碼以前，源代碼是以前公司作後臺的一個大佬寫的，他的解決辦法是在 onchange事件裏實時的監控 ，js獲取DOM，操做父節點；

做爲一個有原則有底線的前端，怎麼能忍受使用react的同時又頻繁的操做DOM？

不說廢話，直接上代碼

 

 給 Radio 或checkbox 添加一個父元素div，類名隨Radio 或checkbox的checked值變化，而後在css中寫好兩套自定義樣式，o了。