Блог

Итак, я пытаюсь придать стиль элементу, когда пользователь фокусируется / наводит курсор на ввод / кнопку. Я делаю это, используя состояние и устанавливая для него значение true или false, если пользователь завис или сфокусировался, но считает его очень повторяющимся и потребует много кода, учитывая, что мне пришлось бы создавать сфокусированное и зависшее состояние для каждой кнопки или ввода. Например, я делаю :

  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>
 )
 

Поэтому мне нужно было бы создать зависшую переменную для каждой кнопки или ввода, которые у меня есть, и я хочу знать, есть ли способ сделать это таким образом, но когда я попытался, я получил сообщение об ошибке:

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

Вы не можете указывать псевдоклассы, используя встроенные стили. Это означает :hover , :focus , :active , или :visited выйти из окна, а не из компонента. источник: 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';