Styled components not applying styles

Question

I have this 2 styled components

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

`

I want to display Icon on the hover of this div but i dont understand why it is not working, Any suggestions please?

Answer 1

There is no problem with your code except on hover you don't change the color from its default value 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