：hover元素更改::之后设置另一个组件的样式

Question

悬停在StyledLink上后，如何将StyledLi :::的宽度从0％更改为90％

const StyledLink = styled(Link)`
    text-decoration: none;
    margin-right: 20px;
    font-size: 20px;
    color: grey;
    transition: 0.2s;

    :hover {
        color: blue;
    }
`

const StyledLi = styled.li`
    ::after {
        content: "";
        display: block;
        width: 0%;
        height: 2px;
        background-color: blue;
    }
`

Answer 1

您可以reference other components使用样式组件。

Live Sandbox

return (
  <StyledLink>
    <StyledLi>
      Link Text
    </StyledLi>
  </StyledLink>
);

const StyledLi = styled.li`
  ::after {
    content: "";
    display: block;
    width: 0%;
    height: 2px;
    background-color: blue;
  }
`;

const StyledLink = styled(Link)`
  text-decoration: none;
  margin-right: 20px;
  font-size: 20px;
  color: grey;
  transition: 0.2s;

  :hover {
    color: blue;

    ${StyledLi}::after {
      width: 90%;
    }
  }
`;