如何移除按钮选中/悬停时的阴影/圆形效果？

针对你遇到的NavButton悬停时出现阴影和圆形效果的问题，这里提供几种可行的解决方式：

1. 自定义CSS覆盖样式 #

给按钮添加自定义类名，通过CSS直接重置悬停状态的样式：

首先修改组件代码，添加className：

<NavButton 
  className="custom-nav-button"
  disabled={loading || rowsLength < size} 
  onClick={handleNext}
>
  <AngleRightIcon size={24} />
</NavButton>

然后添加对应的CSS样式：

.custom-nav-button:hover:not(:disabled) {
  /* 移除阴影 */
  box-shadow: none;
  /* 移除圆形效果（如果是圆角导致） */
  border-radius: 0;
  /* 重置背景色为默认状态的颜色，避免hover时变色 */
  background-color: transparent; /* 替换成你按钮的默认背景色 */
}

2. 内联样式直接覆盖（适用于支持sx属性的UI组件） #

如果你的NavButton是基于Material UI这类支持sx属性的组件封装的，可以直接用内联样式覆盖：

<NavButton
  sx={{
    '&:hover:not(:disabled)': {
      boxShadow: 'none',
      borderRadius: 0,
      backgroundColor: 'inherit'
    }
  }}
  disabled={loading || rowsLength < size}
  onClick={handleNext}
>
  <AngleRightIcon size={24} />
</NavButton>

3. 使用组件内置属性（如果有） #

部分UI组件库会提供直接禁用悬停效果的属性，比如Material UI的Button有disableElevation属性可以直接移除阴影，如果你的NavButton封装了这类属性，直接添加即可：

<NavButton
  disableElevation
  disabled={loading || rowsLength < size}
  onClick={handleNext}
>
  <AngleRightIcon size={24} />
</NavButton>

注意事项 #

• 你需要根据按钮的默认样式调整background-color的值，确保hover状态和默认状态视觉一致
• 如果圆形效果不是来自border-radius，可以检查是否是背景图或其他样式导致，针对性重置即可

内容的提问来源于stack exchange，提问作者mariadev