我用Radio.Group做了一组单选的图片。本来Radio.Group是自带灰色边框的。如下图:
但是UI要求不要边框。刚开始想的很简单,想直接设置Radio.Button的border为none就行。没想到出现以下问题。
问题一、设置Radio.Button的border为none后,选中状态的边框就不清晰了。如下图:
这个的解决办法很简单:在源码中去找antd的选中状态,设置一下即可。代码如下:
.ant-radio-button.ant-radio-button-checked {
border: solid 1px #1890ff;
}
这样就解决了边框选择后的问题。
问题二、两个选项之间出现了一条灰色的线,如下图:
我本以为这个只是一个容器的左边框颜色设置问题。所以在antd的css样式中疯狂的找border-left的样式。结果找了半天都没找到。就当我快放弃的时候,在后端找到一个这个边框所在位置对应的样式,当然,我还是直接在这个样式里面写了border:"none",显而易见,这样还是没有效果。突发奇想,我又在里面写了background-color=red,测试着玩,。。。。。好家伙。。。。。。。这条线直接就变成红色的了。============>>>>>>>>这不就显而易见了麻,图中这条线并不是真的只是一条线,而是容器的背景==========所以,要隐藏这条线,直接设置背景颜色即可。。。代码如下。。。
.ant-radio-button-wrapper:not(:first-child)::before {
background-color: transparent;
}
emmmm 作为一只菜鸟可真不容易啊。。。。。