Menu
I'm using styled-components in React-Native App.
Let's say I have link component:
import styled from 'styled-components/native';
const Link = styled.Text`
color: 'red';
&:hover {
color: 'blue';
}
`
After that, I 'compile' my React-Native code with react-native-web.
All is great expect that hover is not working. (Text color remains red on hover.)
My guess is that https://github.com/styled-components/css-to-react-native is removing the hover definition.
Any idea how to fix this?
825
React Native is an open-source mobile application framework. With styled components you can build simple, dynamic, and reusable components by writing CSS in your React Native component.
With styled-components you attach the styles right to the component and don't really name anything. With css-modules, you're applying the styles directly to an HTML element only. With styled-components you can apply the styles to custom components and it will slap the styles on by way of spreading props later.
As seen from the button component example, styled-components allows you to combine CSS and JS in the same file. So, you don't need to create a separate CSS file or keep switching from file to file. This is a huge advantage when creating UI kits because you store all the functionality of the components in one file.
For native mobile development hover doesn't have a definition, that's because there is no cursor on the screen like there is on desktop devices. As React Native for web simulates how RN works, the :hover selector loose its sense
127
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
