CODEWITHSUNDEEP
cssreactjstypescript
lo7
lo7

Reputation: 445

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

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'
  }       
}

Upvotes: 2

Views: 7929

Answers (1)

cubitouch
cubitouch

Reputation: 1937

I believe what you want to do is:

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

Upvotes: 6

Related Questions