Reference component itself in styled-components

Question

I have a component like this below. Can I somehow reference to the Step component itself? I mean something like ${this}. I tried to do ${Step}, but it gives me error: was used before it was defined.

const Step = styled.i`
  height: 25px;
  width: 14px;
  background-color: grey;

  :hover ~ ${this}, :hover {
    background: blue;
  }
`;

Answer 1

You can use &:hover in this case:

&:hover ~ &, &:hover {
  background: blue;
}