होवर

Question

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

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

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

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

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

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

अधिक जानकारी के लिए the documentation मिलते हैं!

---

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

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

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

वी 2 के बाद से से v1 मैं एक ड्रॉप में उन्नयन है डी अद्यतन करने की सिफारिश करें, लेकिन अगर यह कार्ड में नहीं है तो यह एक अच्छा कामकाज है।