antd 电台圈落在外面

Question

我在 React js 应用程序中使用单选按钮。最近我注意到在单选按钮中 cicrle 落在按钮之外。我想也许边距、填充有问题。但是当我删除所有边距、样式、类名等时。问题仍然没有消失。当我尝试在另一个页面中使用相同的 ANTD 组件时，出现了同样的问题。我没有在 index.css 中使用任何特定样式 ANTD Radio 之前有人遇到过这个问题吗对不起，我没有提供任何代码。但我什至没有任何东西可以提供。我真的删除了所有可能的东西

Answer 1

为您的组件创建一个 css 文件并添加以下 css。您的问题很可能是由于 position 属性被其他 css

覆盖

position 应该是 position: absolute;

默认antd .ant-radio-inner::after应该如下

.ant-radio-inner::after {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 16px;
    height: 16px;
    margin-top: -8px;
    margin-left: -8px;
    background-color: #1890ff;
    border-top: 0;
    border-left: 0;
    border-radius: 16px;
    transform: scale(0);
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
    content: ' ';
}

当 position 属性从上面移除时 class 你会遇到这个问题，检查下面的截图

移除后 position: absolute; 属性

添加后position: absolute;属性:

希望对你有帮助..谢谢:)

antd 电台圈落在外面

Antd radio circle falls outside

javascript

css

radio

radio-button

antd