Как я могу сфокусировать кнопку на щелчке с помощью style-компонентов для React?

Question

Я хотел бы сделать простую вещь: мои кнопки будут менять цвет фона при нажатии.

Я использую styled-компоненты, а псевдоклассы :focus :visited :target неРабота.Я также попытался изменить div на ссылку привязки.

Странно, но :hover работает, а вышеупомянутые не работают.

const Box = styled.div`
   display: flex;
   justify-content: center;
   align-items: center;
   padding: 18px;
   box-shadow: 0 5px 5px rgba(17, 16, 62, 0.1);
   font-size: 16px;
   font-weight: 700;
   border: 2px solid rgb(74, 165, 234);
   border-radius: 3px;
   background: white;
   cursor: pointer;

&:hover {
   box-shadow: 0 5px 5px rgba(17, 16, 62, 0.15);
}

&:focus {
   background: rgb(104, 173, 226);
   color: white;
}`

Я ожидал, что кнопка изменит цвет фона, как только я нажму на нее.Но вместо этого ничего не происходит.

Answer 1

Div не фокусируются.Либо используйте фактический <button> (это, конечно, styled.button), либо дайте ему tabindex:

div,
button {
  padding: 0.5em;
  border: 1px solid hotpink;
  width: 50%;
  font-size: 1rem;
}

div:focus,
button:focus {
  background: hotpink;
}

<div>div without tabindex</div>
<button>button</button>
<div tabindex="0">div with tabindex</div>

Фокусируемые элементы HTML: https://gist.github.com/jamiewilson/c3043f8c818b6b0ccffd

Значения Tabindex: https://snook.ca/archives/accessibility_and_usability/elements_focusable_with_tabindex