'How can I use pseudoclass :hover in react-native-web?
I have this styles code which allows me to use media queries in react-native-web:
landscapePackshotHolder: {
boxSizing: 'border-box',
width: 'calc(20% - (8% - 10px)/5)',
padding: '0 10px',
[`@media (max-width: ${Breakpoint.SM}px)`]: {
width: 'calc(50% - (40px - 6px)/2)',
paddingHorizontal: 6,
},
[`@media (min-width: ${Breakpoint.SM + 1}px) and (max-width: ${Breakpoint.MD}px)`]: {
width: 'calc(33.3333333333% - (40px - 6px)/3)',
paddingHorizontal: 6,
},
[`@media (min-width: ${Breakpoint.MD + 1}px) and (max-width: ${Breakpoint.XL}px)`]: {
width: 'calc(25% - (96px - 8px)/4)',
paddingHorizontal: 8,
},
},
This leads me to assume I can also use pseudoclasses like hover because of the ability to add regular CSS to the typescript react native stylesheet, but this code using &:hover does not work:
landscapePackshotHolder: {
boxSizing: 'border-box',
width: 'calc(20% - (8% - 10px)/5)',
[`&:hover`]: {
width: 'calc(2% - (8% - 10px)/10)',
},
padding: '0 10px',
[`@media (max-width: ${Breakpoint.SM}px)`]: {
width: 'calc(50% - (40px - 6px)/2)',
paddingHorizontal: 6,
},
[`@media (min-width: ${Breakpoint.SM + 1}px) and (max-width: ${Breakpoint.MD}px)`]: {
width: 'calc(33.3333333333% - (40px - 6px)/3)',
paddingHorizontal: 6,
},
[`@media (min-width: ${Breakpoint.MD + 1}px) and (max-width: ${Breakpoint.XL}px)`]: {
width: 'calc(25% - (96px - 8px)/4)',
paddingHorizontal: 8,
},
},
I want to avoid using onMouseEnter... because the use of state seems unnecessary, I have seen the node.setNativeProps() method mentioned but after trying it does not appear to work either.
How can I use the hover css pseudoclass in react-native-web?
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|