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

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

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

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

然而通常情況下選中和非選中的時候我們需要改變的是??class="am-checkbox-wrapper" 的樣式，

這時候問題就變成了? 子元素改變，父元素需要跟著改變，用css目前為止還不能實現，由于瀏覽器的渲染機制，父選擇器的出現幾乎還不可能，在我優(yōu)化代碼之前，源代碼是之前公司做后臺的一個大佬寫的，他的解決辦法是在 onchange事件里實時的監(jiān)控 ，js獲取DOM，操作父節(jié)點；

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

不說廢話，直接上代碼

?

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

?

轉載于:https://www.cnblogs.com/222tjr-blog/p/8023336.html

《新程序員》：云原生和全面數字化實踐50位技術專家共同創(chuàng)作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的Antd组件中单选框、复选框自定义样式的优雅实现的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。