Celuj w inny stylizowany komponent na hover

Question

Jaki jest najlepszy sposób na obsadzenie wrzecion w stylizowanych komponentach. Mam element zawijania, który po ukryciu ujawni przycisk.

Mogę zaimplementować pewien stan na komponencie i przełączyć właściwość po najechaniu kursorem, ale zastanawiałem się, czy jest lepszy sposób na to zrobić za pomocą stylów-cmponents.

Coś jak poniżej nie działa, ale byłby idealny:

const Wrapper = styled.div` 
    border-radius: 0.25rem; 
    overflow: hidden; 
    box-shadow: 0 3px 10px -3px rgba(0, 0, 0, 0.25); 
    &:not(:last-child) { 
    margin-bottom: 2rem; 
    } 
    &:hover { 
    .button { 
     display: none; 
    } 
    } 
` 

Answer 1

Jak stylizowany-komponentów v2 można interpolować inne tytułowana komponenty do odnoszą się do ich nazw klas generowanych automatycznie. W twoim przypadku prawdopodobnie będziesz chciał zrobić coś takiego:

const Wrapper = styled.div` 
    &:hover ${Button} { 
    display: none; 
    } 
` 

Zobacz the documentation aby uzyskać więcej informacji!

---

Jeśli używasz v1 i trzeba to zrobić można obejść przy użyciu nazwy zwyczaj Klasa:

const Wrapper = styled.div` 
    &:hover .my__unique__button__class-asdf123 { 
    display: none; 
    } 
` 

<Wrapper> 
    <Button className="my__unique__button__class-asdf123" /> 
</Wrapper> 

Od v2 jest kroplą w uaktualnieniu z v1 I d polecam aktualizację, ale jeśli nie ma jej na kartach, jest to świetne obejście.