javascript - Bootstrap Button在点击后仍然处于奇怪的状态

Question

堆：

• Next.js
• 反应引导
• 样式化组件

问题

我有这个引导按钮：

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

当用我的默认规范覆盖: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;
        }
    }
`;

我还在theming我的 custom.bootstrap.scss 中通过这样的方式在我的引导程序中添加了一些颜色自定义：

$theme-colors: (
    'primary': #e28215,
    'secondary': #83b8f3,
    'tertiary': #1575e2,
    ...
);

附加信息：

我还查看了状态，当按钮处于阶段状态时，它似乎没有激活或任何东西：

标签： javascriptcssreactjstwitter-bootstrapnext.js