Я пробую некоторые стили css, которые требуют использования псевдо a::hover::after
, я предполагал, что это указано в документации
что, как я могу сделать это, чтобы использовать псевдоним hover:
<Link _hover = {{//styles here}}/>
В том же смысле использование hover::after
должно быть таким:
<Link _hover_after = {{//styles here}}/>
Но, похоже, это не работает, и я не могу найти подсказку об этом конкретном использовании в документации.
Как я могу использовать псевдо ::hover::after
для элемента React с пользовательским интерфейсом Chakra?
Я сталкивался с этой проблемой раньше, и я не мог найти решение. Но я нашел обходной путь, используя состояние isHovering
, поэтому, когда onMouseOver
событие устанавливает для него значение true, а onMouseLeave
вы устанавливаете для него значение false и добавляете условные стили. См. пример:
const LinkElement = () => {
const [isHovering, setIsHovering] = useState(false);
return <Link
_after = { color: isHovering ? 'red' : 'blue' }
onMouseEnter = {() => setIsHovering(true)}
onMouseLeave = {() => setIsHovering(false)}
/>
}
Это не должно влиять на производительность так, как это действительно важно, поскольку это всего лишь изменение состояния, не более того.
Спасибо! Это решило проблему, но мне было интересно, повлияет ли это на производительность?