单击后，Bootstrap按钮保持奇怪状态

Question

堆栈：

• Next.js
• React-Bootstrap
• styled-components

问题

我有这个Bootstrap按钮：

单击按钮并记下我的业务后，它看起来是这样，我不知道为什么或如何更改它。任何帮助表示赞赏。

当使用我的默认规范覆盖sh -c "$(curl -fsSL https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)" 状态时，按钮的外观应为预期的样子，但是现在悬停过渡不会改变。

按钮样式：

按钮的样式如下：

:focus

我还通过import styled from 'styled-components'; import { Button } from 'react-bootstrap'; import { device } from '@/Components/styles'; export const LoginButton = styled(Button)` border-radius: 5px; border: solid 2px; background: #e28215; color: white; border-color: white; font-weight: 900; font-size: 14px; padding: 5px 10px; ${device.sm} { font-size: 16px; padding: 10px 20px; } ${device.md} { font-size: 18px; padding: 10px 30px; } transition: all 0.2s ease-in-out; -webkit-box-shadow: 0 24px 38px 3px #f7f7f72e, 0 9px 46px 8px #ffffff2b, 0 11px 15px -7px #000; box-shadow: 0 24px 38px 3px #f7f7f72e, 0 9px 46px 8px #ffffff2b, 0 11px 15px -7px #000; &:hover { background: #ffffff; color: #e28215; border-color: #e28215; -webkit-box-shadow: 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12), 0 11px 15px -7px rgba(0, 0, 0, 0.2); box-shadow: 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12), 0 11px 15px -7px rgba(0, 0, 0, 0.2); font-size: 16px; padding: 5px 10px; ${device.sm} { margin-top: -6px; font-size: 18px; padding: 12px 22px; } ${device.md} { margin-top: -6px; font-size: 20px; padding: 12px 34px; } } `; 在我的bootstrap中添加了一些颜色自定义，就像我的custom.bootstrap.scss中一样：

theming

其他信息：

我也查看了状态，当按钮处于舞台状态时，它似乎未处于活动状态或任何其他状态：