How to use hover with react-jss

README.md

How to use hover with react-jss

Let's say we have the following style:

const styles = (theme) => ({
  title: {
    color: theme.color,
  },
})

and we want to change the color when the title is hovered.

In plain CSS we can use psudo classes:

.title:hover{
  color: 'red',
}

While in SASS/LESS:

.title{
  &:hover{
    color: 'red',
  }
}

To accomplish this with react-jss, we can use & operator just like in SASS/LESS:

const styles = (theme) => ({
  title: {
    color: theme.color,
    '&:hover': {
      color: theme.hoverColor,
    }
  },
})

There is a working example: https://codesandbox.io/s/kw3wx5ymkv

thank brother