Css 如何将按钮集中在带有样式化组件的click上以进行React？

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

我正在使用样式化组件，而伪类

:focus

:visted

: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;
}`

---

我希望按钮一点击就会改变背景颜色。但是它什么也不做。

div是不可聚焦的。使用一个实际的

（当然是

样式化的.button

），或者给它一个tabindex：

div，
钮扣{
填充：0.5em；
边框：1px纯色热粉色；
宽度：50%；
字号：1rem；
}
新闻组：焦点，
按钮：焦点{
背景：火红；
}

div不带tabindex
按钮
带tabindex的div