Styled Components跨文件样式不生效：hover背景色被覆盖问题咨询

我基于已定义的InfoButton创建AboutItem组件，试图将hover时的背景色设置为#282828，但实际hover时仍显示InfoButton中定义的lightblue背景色，请问原因是什么？

相关代码 #

定义基础按钮组件的文件

export const Button = styled.button`
  display: inline-block;
  font-size: 1em;
  margin: 1em;
  padding: 0em 1em;
`;

export const InfoButton = styled(Button)`
  color: grey;
  &:hover {
    background-color: lightblue;
  }
`;

定义AboutItem组件的文件

interface AboutNavProps {
  selected: boolean;
}

const AboutItem = styled(InfoButton) <AboutNavProps>`
  color: grey;
  background-color: ${props => props.selected ? "#282828" : "transparent"};
  text-align: center;
  &:hover {
    background-color: #282828;
  }
`;

export function AboutNavbar() {
  const router = useRouter()
  useEffect(() => {
    router.prefetch("/method");
  }, [])

  return (
    <AboutNav aria-label="Navbar">
      <AboutItem as="a" href="method" selected={router.pathname == "/method"}>How It Works</AboutItem>
      <AboutItem as="a" href="about" selected={router.pathname == "/about"}>About</AboutItem>
      <Logo />
    </AboutNav>
  );
}

原因分析 #

这是CSS优先级冲突导致的结果：
InfoButton和AboutItem中的&:hover选择器权重完全相同，而Styled Components生成的样式规则注入顺序会影响最终效果。如果InfoButton的样式规则在AboutItem之后被加载到页面中，它的lightblue背景色就会覆盖AboutItem中定义的#282828。

解决方案 #

1. 提高子组件hover样式的优先级（推荐）

使用&&:hover替代&:hover，通过叠加类选择器提升优先级，确保子组件的hover样式优先生效：

const AboutItem = styled(InfoButton) <AboutNavProps>`
  color: grey;
  background-color: ${props => props.selected ? "#282828" : "transparent"};
  text-align: center;
  &&:hover {
    background-color: #282828;
  }
`;

2. 调整样式注入顺序

确保定义AboutItem的文件在InfoButton之后引入，这样AboutItem的样式规则会后加载，从而覆盖同优先级的父组件规则。不过这种方式依赖代码引入顺序，稳定性不如第一种方案。

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