होवर पर एक और स्टाइल घटक को लक्षित करें

Question 1

स्टाइल-घटकों में होवर को संभालने का सबसे अच्छा तरीका क्या है। मेरे पास एक रैपिंग तत्व है जब हॉवर किया गया एक बटन प्रकट करेगा।

मैं घटक पर कुछ राज्य लागू कर सकता था और होवर पर एक संपत्ति को टॉगल कर सकता था, लेकिन सोच रहा था कि क्या स्टाइल-सैंपर्स के साथ ऐसा करने का एक बेहतर तरीका है।

निम्नलिखित की तरह कुछ काम नहीं करता है, लेकिन आदर्श होगा:

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

Question 2

स्टाइल-घटकों v2 के रूप में आप अन्य स्टाइल घटकों को उनके स्वचालित रूप से उत्पन्न वर्ग नामों के संदर्भ में प्रक्षेपित कर सकते हैं। आपके मामले में आप शायद ऐसा कुछ करना चाहेंगे:

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

अधिक जानकारी के लिए दस्तावेज देखें !

घटकों का क्रम महत्वपूर्ण है। यह तभी काम करेगा जब Buttonऊपर / पहले परिभाषित किया गया हो Wrapper।

यदि आप v1 का उपयोग कर रहे हैं और आपको यह करने की आवश्यकता है तो आप कस्टम क्लास नाम का उपयोग करके इसके चारों ओर काम कर सकते हैं:

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

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

चूंकि v2 एक ड्रॉप-इन अपग्रेड है v1 से मैं अपडेट करने की सलाह दूंगा, लेकिन अगर यह कार्ड में नहीं है तो यह एक अच्छा समाधान है।

Question 3

इसी तरह mxstbr के उत्तर के लिए, आप मूल घटक को संदर्भित करने के लिए प्रक्षेप का उपयोग भी कर सकते हैं। मुझे यह मार्ग पसंद है क्योंकि यह माता-पिता में बच्चे के घटक को संदर्भित करने की तुलना में एक घटक की स्टाइल को थोड़ा बेहतर बनाता है।

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

जब यह फीचर पेश किया गया था तो मैं आपको बता नहीं सकता था लेकिन यह v3 के रूप में काम करता है।

प्रासंगिक लिंक: https://www.styled-compenders.com/docs/advanced#reference-to-other-compenders

Question 4

मेरा समाधान है

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

Question 5

इस समाधान ने मेरे लिए काम किया:

const ContentB = styled.span`
  opacity: 0;

  &:hover {
    opacity: 1;
  }
`

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

Question 6

इसी से मेरा काम बना है

const NoHoverLine = styled.div`
  a {
    &:hover {
      text-decoration: none;
    }
  }
`