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

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

未選中時(shí)的DOM結(jié)構(gòu)（沒有am-checkbox-checked）

選中時(shí)的DOM結(jié)構(gòu)（有am-checkbox-checked類名）

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

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

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

不說廢話，直接上代碼

?

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

?

轉(zhuǎn)載于:https://www.cnblogs.com/222tjr-blog/p/8023336.html

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。