Скрытие дочернего компонента при наведении состояния родителя с помощью styled-component

Question

У меня есть такой компонент реагирования -

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

Я хочу показывать DeleteButtonContainer только тогда, когда пользователь наводит курсор на ContainerSection. Оба они 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>