如何使用针对React的样式组件单击按钮？

Question

我想做一件简单的事情：点击时我的按钮会改变背景颜色。

我使用样式组件和伪类: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

Divs无法集中精力。要么使用实际的<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