样式化的组件组件选择器在鼠标悬停时不起作用

Question

我正在尝试通过鼠标悬停时的以下GIF来构建这种行为。

用户可以使用箭头键进行红色选择，但是在鼠标悬停时，我想隐藏红色选择并仅显示鼠标悬停绿色选择。

Code Sandbox Example

到目前为止，它正在运行。

但是当我尝试使用组件选择器：${S.UserLi}时，它以某种方式中断了，它是每个li的样式化组件的名称。仅当我选择常规li项时，它才起作用，如下面的代码（上面的沙盒链接）所示。

问题

如何使用组件选择器${S.UserLi}使它工作？

S.MentionDiv = styled.div`
  max-width: 200px;
  height : auto;
  overflow: hidden;
  background-color: lightblue;
  padding: 5px;
  box-sizing: border-box;
  ul {
    margin: 0;
  }
  &:hover {
    li { background-color: inherit; } /* THIS WORKS */
    /* ${S.UserLi} { background-color: inherit; } */ /*THIS DOESN'T*/
  }
`;

S.UserLi = styled.li`
  background-color: ${props => props.selected ? 'red' : 'inherit'};
  &&:hover { /* Added two && to make it higher priority over hover on MentionDiv */
    background-color:lightgreen;
    user-select: none;
  }
`;

这是主要组成部分：

function App() {
  return (
    <S.MentionDiv>
      <S.UserLi>
        User 1
      </S.UserLi>
      <S.UserLi
        selected={true}
      >
        User 2
      </S.UserLi>
      <S.UserLi>
        User 3
      </S.UserLi>
    </S.MentionDiv>
  );
}