如何删除按钮 Ant 设计的 ant-click-animating答案

【问题标题】：How to remove ant-click-animating of button Ant design如何删除按钮 Ant 设计的 ant-click-animating
【发布时间】：2021-02-01 03:24:48
【问题描述】：

点击按钮后，按钮周围有动画。所以我想关闭它，我尝试为元素和伪类设置 CSS，但它不起作用。

.ant-switch,
.ant-switch:focus,
.ant-switch:active {
  border-color: white !important;
  box-shadow: none !important;
  outline: unset;
}

我的代码：

import React from 'react';
import { Switch } from 'antd';
import styled from 'styled-components';

const RSwitch = styled(Switch)`
  background-color: ${props => props.backgroundcolor};

  .ant-switch-handle::before {
    background-color: #9b9b9b;
    right: 0;
  }

  &[aria-checked='true'] {
    .ant-switch-handle {
      ::before {
        background-color: ${props => props.color};
      }
    }
  }
`;

export default function SwitchComponent({
  onChange,
  checked,
  color = '#00afdb',
  backgroundColor = ''
}) {
  return (
    <RSwitch
      onChange={onChange}
      checked={checked}
      size="small"
      color={color}
      backgroundcolor={backgroundColor}
    />
  );
}

ant switch picture

HTML of switch

【问题讨论】：

标签： css antd

【解决方案1】：

我用这个解决方案修复了它在您的 ant 覆盖中创建一个 button.less 文件并将其放入其中

[ant-click-animating-without-extra-node='true']::after{display:none;}

它会像魅力一样发挥作用。

【讨论】：

【解决方案2】：

我意识到它只是一个 div 标签，所以我不显示它。如果大家有更好的解决方案，请告诉我。

.ant-click-animating-node {
  display: none;
}

【讨论】：

不起作用，兄弟。我会在接下来的几天内发布答案。