Nhắm mục tiêu thành phần được tạo kiểu khác khi di chuột

Cách tốt nhất để xử lý di chuột trong các thành phần được tạo kiểu. Tôi có một phần tử bao bọc mà khi di chuột lên sẽ để lộ một nút.

Tôi có thể triển khai một số trạng thái trên thành phần và chuyển đổi một thuộc tính khi di chuột nhưng đang tự hỏi liệu có cách nào tốt hơn để thực hiện điều này với các style-cmponents.

Một cái gì đó như sau không hoạt động nhưng sẽ là lý tưởng:

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;
    }
  }
`

Đối với các thành phần được tạo kiểu v2, bạn có thể nội suy các thành phần được tạo kiểu khác để tham chiếu đến tên lớp được tạo tự động của chúng. Trong trường hợp của bạn, bạn có thể muốn làm điều gì đó như sau:

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

Xem tài liệu để biết thêm thông tin!

Thứ tự của các thành phần là quan trọng. Nó sẽ chỉ hoạt động nếu Buttonđược định nghĩa ở trên / trước đó Wrapper.

Nếu bạn đang sử dụng v1 và bạn cần làm điều này, bạn có thể khắc phục nó bằng cách sử dụng tên lớp tùy chỉnh:

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

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

Vì v2 là bản nâng cấp thả xuống từ v1 nên tôi khuyên bạn nên cập nhật, nhưng nếu điều đó không có trong thẻ thì đây là một giải pháp tốt.

Tương tự như câu trả lời của mxstbr, bạn cũng có thể sử dụng phép nội suy để tham chiếu đến một thành phần chính. Tôi thích tuyến đường này vì nó đóng gói kiểu dáng của một thành phần tốt hơn một chút so với việc tham chiếu thành phần con trong thành phần mẹ.

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

Tôi không thể cho bạn biết khi nào tính năng này được giới thiệu nhưng tính năng này hoạt động kể từ phiên bản v3.

Liên kết có liên quan: https://www.styled-components.com/docs/advanced#referring-to-other-components

Giải pháp của tôi là

const Content = styled.div`
  &:hover + ${ImgPortal} {
    &:after {
      opacity: 1;
    }
  }
`;

Giải pháp này đã làm việc cho tôi:

const ContentB = styled.span`
  opacity: 0;

  &:hover {
    opacity: 1;
  }
`

const ContentA = styled.span`
  &:hover ~ ${ContentB} {
    opacity: 1;
  }
`