javascript - styled components :hover with react-native and react-native-web - Stack Overflow

admin管理员组

文章数量:1202195

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 is removing the hover definition.

Any idea how to fix this?

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?

• javascript
• reactjs
• react-native
• styled-components
• react-native-web

Share Improve this question Follow edited Nov 12, 2018 at 18:20 kit 1,17355 gold badges1717 silver badges2323 bronze badges asked Aug 31, 2017 at 12:51 Dávid ĎurikaDávid Ďurika 12111 gold badge11 silver badge55 bronze badges 1

• Maybe you can ref to my answer in onmouseenter event in react native – Li Zheng Commented Feb 15, 2021 at 8:14

Add a comment  | 

4 Answers 4

Sorted by: Reset to default 7

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

You can use onMouseEnter and onMouseLeave like in the refs section of styled-components. Advanced guide.

You can use rn-css that works like styled-components but with better support for css in React-Native.

Just replace import styled from 'styled-components/native'; with import styled from 'rn-css'; and your code will work.

Try use TouchableHighlight.

You can define the backgroundcolor when your button it's pressed or not!

Follow the guide on https://facebook.github.io/react-native/docs/touchablehighlight

本文标签： javascriptstyled components hover with reactnative and reactnativewebStack Overflow