React element events

Question

So I'm trying to style an element when user focuses/hovers on an input/button. The way I'm doing it is by using a state and setting it to true or false if the user has hovered or focused but find it very repetitive and will take a lot of code, considering I would have to create a focused and hovered state for each button or input. For example, I'm doing :

 const [hoveredBtn, setHoveredBtn] = useState(false)
 const [themecolor, setThemecolor]=useState('red') //this state is being from firebase, red would 
  //just be an example, it can be whatever the user sets it to.
 return (
 <button 
 onMouseOver={()=>setHoveredBtn(true)} 
onMouseLeave={()=>setHoveredBtn(false)} 
style={hoveredBtn?{backgroundColor: themecolor}:{backgroundColor:"white"}}
 >
Button
 </button>
 )

Therefore, I would need to create a hovered variable for each button or input I have and im looking to know if there is a way to do it like this, but when I tried I get an error:

 return (
  <button onMouseOver={this.style.color=themecolor} onMouseLeave= 
 {this.style.color='white'}>Button</button>
  )

Answer 1

You can’t specify pseudo-classes using inline styles. That means :hover, :focus, :active, or :visited go out the window rather than the component. source: https://www.freecodecamp.org/news/react-styled-components-inline-styles-3-other-css-styling-approaches-with-examples/

style.css:

.myComponent:hover {
    // define style
}

myReactComponent.jsx:

import './style.css';