css - 如何删除按钮 Ant design 的 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}
    />
  );
}

ant switch picture

HTML of switch

Answer 1

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

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

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