reactjs - 样式化的组件不应用样式

Question

我有这 2 个样式的组件

  export const Icon = styled.svg`
  width: 8px;
  height: 8px;
  background: black;
`

export const Dots = styled.div`
  border: 2px solid green !imporant;
  height: 30px;
  background: white;
  width: 16px;
  height: 16px;
  border: solid 1px #d2d2d2;
  border-radius: 20px;
  top: 25px;
  position: relative;



  ${Icon}: hover {
    background:black;
  }
  
  }

`

我想Icon在这个 div 的悬停上显示，但我不明白为什么它不起作用，请问有什么建议吗？

标签： reactjsstyled-components

Answer 1

您的代码没有问题，除非在悬停时您不会更改默认值的颜色black

const Icon = styled.div`
  width: 100px;
  height: 100px;
  background: black;
`;

export const Dots = styled.div`
  ${Icon}:hover {
    background: red;
  }
`;

export default function App() {
  return (
    <Dots>
      <Icon />
    </Dots>
  );
}

https://codesandbox.io/s/styled-react-template-forked-nzwm8