css - 过渡持续时间在 React-Apps 中不起作用？

Question

我是 react-apps 的新手，我正在创建一个只有一个输入和一个按钮的简单表单，我向按钮添加了样式，但过渡持续时间不起作用，我该如何在 react 中解决这个问题？没有反应它会工作但在 react 中我有这个问题。这是我的按钮风格

.form{
    width: 700px;
}
.btn-detect{
        background-color: #000;
        color: #fff;
        border: none;
        font-family: 'Felix Titling';
        letter-spacing: 2px;
        left: 0;
        -webkit-transition: transform 1s ease-in-out;
        -moz-transition: transform 1s ease-in-out;
        -o-transition: transform 1s ease-in-out;
        -ms-transition: transform 1s ease-in-out;
        transition: transform 1s ease-in-out;

    }
    .btn-detect:hover{
        -webkit-transform: scale(1.5);
        -moz-transform: scale(1.5);
        -o-transform: scale(1.5);
        -ms-transform: scale(1.5);
        transform: scale(1.5);
    }

这是 react 组件:

const ImageLinkForm = () => {
    return(
        <div>
            <p className='f3 pt'>
                {'This Magic Brain will detect faces in your pictures,Give it a try!'}
            </p>
            <div className='center'>
                <div className='form center pa4 br3 shadow-5'>
                <input className='f4 pa2 w-70 center' type='text' />
                <button className='btn-detect w-30 f5 link pointer'>Detect</button>
                </div>
            </div>
        </div>
        );
}

Answer 1

代码很好，可能是你在错误的组件/文件中设置了样式，由于样式封装它没有生效或者 css 类名拼写错误。

如果您需要更多帮助，请提供 react 组件代码。