antd 5.4.2 switch组件点击时周围光晕如何关闭？

Question

问题：使用antd switch组件 点击开关时四周会显示一下光圈，怎么关闭。

设置box-shadow:none;没有效果。也没有再css样式中看到设置光圈。

Answer 1

antd Switch 组件的四周显示光圈是由内置样式 .ant-switch-handle::before 和 .ant-switch-handle::after 生成的，可以通过覆盖这些样式来关闭。

在自己的 CSS 样式表中添加以下代码即可：

.ant-switch-handle::before,
.ant-switch-handle::after {
  box-shadow: none;
}

注意：需要保证自己的样式表在 antd 的样式表之后加载，否则可能会被 antd 样式表覆盖。