Как использовать этот псевдо-a::hover::after в пользовательском интерфейсе Chakra?

Я пробую некоторые стили css, которые требуют использования псевдо a::hover::after, я предполагал, что это указано в документации что, как я могу сделать это, чтобы использовать псевдоним hover:

<Link _hover = {{//styles here}}/>

В том же смысле использование hover::after должно быть таким:

<Link _hover_after = {{//styles here}}/>

Но, похоже, это не работает, и я не могу найти подсказку об этом конкретном использовании в документации. Как я могу использовать псевдо ::hover::after для элемента React с пользовательским интерфейсом Chakra?

Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
CSS: FlexBox
CSS: FlexBox
Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.
1
0
228
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я сталкивался с этой проблемой раньше, и я не мог найти решение. Но я нашел обходной путь, используя состояние 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)}
            />
}

Спасибо! Это решило проблему, но мне было интересно, повлияет ли это на производительность?

Abdelrahmen Ayman 18.11.2022 11:59

Это не должно влиять на производительность так, как это действительно важно, поскольку это всего лишь изменение состояния, не более того.

Franco Gabriel 18.11.2022 13:45

Другие вопросы по теме