#reactjs
#reactjs
Вопрос:
Итак, я пытаюсь придать стиль элементу, когда пользователь фокусируется / наводит курсор на ввод / кнопку. Я делаю это, используя состояние и устанавливая для него значение 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>
)
Комментарии:
1. зачем использовать javascript для этого — css был бы лучше.
Ответ №1:
Вы не можете указывать псевдоклассы, используя встроенные стили. Это означает :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';
Комментарии:
1. Я не могу использовать css, потому что я создаю приложение, в котором пользователь имеет доступ к изменению цвета темы приложения, поэтому, если я не смогу добавить динамический цвет, это не сработает
2. В этом случае я бы использовал
styled-components
библиотеку: styled-components.com3. спасибо за рекомендацию, именно то, что я ищу