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

Question

单击按钮后，按钮周围有动画。所以我想把它关掉，我尝试为元素和伪类设置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}
    />
  );
}

蚂蚁开关图片

开关的 HTML

Answer 1

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

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

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