转换持续时间在React-Apps中不起作用？

Question

我是react-apps的新手，我创建了一个只有一个输入和一个按钮的简单表单，我给按钮添加了样式，但转换持续时间不起作用，我如何在react中修复这个问题？没有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-component：

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>
        );
}