Кнопка SemanticUI все еще активна после нажатия

Question

import React from 'react'
import { Button } from 'semantic-ui-react'

const ButtonExampleShorthand = () => <Button content='Click Here' />

export default ButtonExampleShorthand

Когда вы нажимаете на кнопку, она становится серой и остается такой, пока вы не нажмете где-нибудь еще. Можно ли вернуть его в исходное состояние (светло-серый) сразу после нажатия?

Answer 1

Любой <button> (а не только из Semanti c -UI) может находиться в нескольких различных состояниях. Эти состояния могут быть выбраны и стилизованы с помощью псевдо-классов в CSS.

:hover - это когда вы наводите указатель мыши на кнопку

:active - когда вы нажимали кнопку, но еще не отпустили ее.

:focus - это когда пользователь использовал клавишу tab, чтобы сфокусировать свой браузер на этом элементе.

Проблема, на которую вы ссылаетесь в своем вопросе, возникает из-за того, что нажатие на кнопку устанавливает фокус браузера на этой кнопке . Этот фокус остается после того, как вы отпустите кнопку и уберете указатель мыши с кнопки.

Если стили для вашей кнопки одинаковы для :active и для :focus, это будет выглядеть так, как будто кнопка все еще нажал (но на самом деле кнопка просто фокусируется на браузере, что влияет на стиль). Щелчок в другом месте страницы удаляет фокус браузера с кнопки и, следовательно, обновляет стиль.

A НЕ Рекомендуемое решение - просто настроить стиль :focus, соответствующий стилю, когда кнопка не активен, завис или сфокусирован. Но это не рекомендуется, потому что вспомогательные технологии для правильной работы полагаются на фокусировку. Если не произойдет никаких изменений стиля с :focus, пользователь, использующий только клавиатуру, не сможет использовать ваш сайт.

В React вам нужно будет использовать createRef (или useRef для функциональных компонентов) для управления фокусом вокруг кнопка. В документации Semanti c -UI-react есть пример, который будет полезен . Обратите внимание, что поведение, которое вы описываете, также происходит с их примером кнопки. В React docs также есть некоторые четкие объяснения идей, связанных с этой проблемой.

Чтобы лучше понять фокус, наведение и активность, я рекомендую этот пост , в котором отлично интерактивные примеры, поясняющие различные состояния и то, как они взаимодействуют.

Также стоит отметить, что Firefox, Chrome (и, вероятно, другие браузеры с функциями разработчика) имеют инструмент, с помощью которого вы можете переключать / тестировать состояния элементов.

Этот снимок экрана (красиво отфотошоплен) показывает, где найти эту функцию в Firefox. Он находится в аналогичном месте в Chrome.

Answer 2

Это состояние фокуса Button, я предлагаю вам сохранить состояние фокуса на кнопках, но вот как вы можете переопределить этот стиль.

Добавьте это в свой CSS файл:

.ui.button:focus: {
  background-color: #e0e1e2 none;
}