Question

我有这两个样式化的组件

  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;
  }
  
  }

`

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

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>
  );
}

This

Answer 2

您应该将悬停样式放置在图标中

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

  &:hover {
    background: black;
  }

样式化的组件未应用样式

2 个答案: