:hover and :focus inline style in React doesn't work

Viewed 1221

I am trying to create a const object, which is supposed to be a button with React inline styling, but :hover and :focus doesn't work. How do I implement hover and focus in React?

Any help is appreciated! Thanks in advance.

const Button= {
  background: '#AC003B',
  color: '#fff',
  borderColor: '#AC003B',
  &:hover, &:focus {
    background: '#707070',
    borderColor: '#707070'
  }       
}
1 Answers

I believe what you want to do is:

const Button = {
  background: '#AC003B',
  color: '#fff',
  borderColor: '#AC003B',
  '&:hover, &:focus': {
    background: '#707070',
    borderColor: '#707070'
  }       
}
Related