styled-components中hover伪类样式不生效 其余样式正常如何解决？

常见原因及对应解决方法 #

• 样式优先级被覆盖
  全局CSS、父组件样式中如果存在权重更高的button:hover规则（比如使用了!important、选择器嵌套层级更高），会覆盖styled-components生成的单类名hover样式。
  排查方式：打开浏览器开发者工具，选中Button元素，手动开启:hover状态模拟，检查你写的hover样式是否被划掉，确认覆盖来源。
  修复方案：在hover选择器前加双&提升权重，相当于重复两次组件生成的类名，权重直接翻倍，可以覆盖绝大多数普通规则：

  &&:hover {
    color: rgba(255, 255, 255, 1);
    box-shadow: 0 5px 15px rgba(145, 92, 182, 0.4);
  }
  

• 元素被其他层级遮挡
  若存在z-index更高的透明元素/父级兄弟元素浮在Button上方，鼠标实际悬浮的是遮挡元素，无法触发Button的hover事件。
  排查方式：用开发者工具的元素选择器直接点击按钮区域，看选中的元素是否为Button组件，若选中的是其他元素即为遮挡问题。
  修复方案：给Button添加定位和更高的z-index，确保它在交互层级的上层：

  position: relative;
  z-index: 10;
  

• 鼠标交互被禁用
  若全局或父级样式给button元素设置了pointer-events: none，会完全禁用元素的鼠标交互，hover事件自然无法触发。
  排查方式：在开发者工具中查看Button的样式列表，确认是否存在pointer-events: none规则。
  修复方案：给Button添加如下样式覆盖禁用规则：

  pointer-events: auto;
  

修复后完整代码示例 #

import styled from "styled-components";

const Button = styled.button`
  color: black;
  padding: 15px 40px;
  border-radius: 4px;
  font-weight: normal;
  text-transform: uppercase;
  transition: all 0.2s ease-in-out;
  margin: 1rem;
  width: 40%;
  /* 修复交互与层级问题 */
  position: relative;
  z-index: 10;
  pointer-events: auto;

  /* 提升hover样式权重 */
  &&:hover {
    color: rgba(255, 255, 255, 1);
    box-shadow: 0 5px 15px rgba(145, 92, 182, 0.4);
  }
`;

export default Button;

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