javascript - 使用 styled-component 在父组件的悬停状态下隐藏子组件

Question

我有一个像这样的 react 组件 -

const MyComponent = () => (
    <ContainerSection>
        <DeleteButtonContainer>
            <Button
                theme="plain"
                autoWidth
                onClick={() => {
                    onDeleteClick();
                }}
            >
                Delete
            </Button>
        </DeleteButtonContainer>
    </ContainerSection>
);

我只想在用户将鼠标悬停在 ContainerSection 上时显示 DeleteButtonContainer。两者都是styled-components .我找不到任何方法来仅使用 css(使用父项在子项中的悬停状态)，所以我使用了类似这样的状态 -

const MyComponent = ()=>{
    const [isHoveredState, setHoveredState] = useState<boolean>(false);
    return (<ContainerSection onMouseEnter={() => setHoveredState(true)} onMouseLeave={() => setHoveredState(false)}>
        <DeleteButtonContainer style={{ display: isHoveredState ? 'block' : 'none' }}>
            <Button
                theme="plain"
                autoWidth
                disabled={!isHoveredState}
                onClick={() => {
                    onDeleteClick();
                }}
            >
                Delete
            </Button>
        </DeleteButtonContainer>
    </ContainerSection>)
};

现在我想在移动设备上始终显示 DeleteButtonContainer，因为它没有悬停。我知道我总是可以使用更多的 JS 来实现这一点，但我想使用 CSS 来实现，如果可能的话我想完全删除状态。

那么有没有办法只使用样式化组件而不编写自定义 JS 来实现这一点？

Answer 1

您可以在另一个组件中引用一个组件，并使用媒体查询为非移动分辨率启用规则。

将鼠标悬停在金色条上可以看到按钮，缩小宽度可以禁用悬停规则。

const DeleteButtonContainer = styled.div``;

const ContainerSection = styled.div`
  height: 2em;
  background: gold;
  
  @media (min-width: 640px) { // when resolution is above 640px
    &:not(:hover) ${DeleteButtonContainer} { // if DeleteButtonContainer is not under an hovered ContainerSection
      display: none;
    }
  }
`;

const Button = styled.button``;

const MyComponent = () => (
<ContainerSection>
  <DeleteButtonContainer>
    <Button>
      Delete
    </Button>
  </DeleteButtonContainer>
</ContainerSection>
);

ReactDOM.render(
  <MyComponent />,
  root
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/styled-components/4.4.0/styled-components.js"></script>

<div id="root"></div>