CSS悬停不会改变Reactjs中的TEXT颜色

Question

悬停中的所有东西（字体大小，边框等）都可以正常使用TEXT颜色，它不会因为遗传而改变（不是为什么）。当我在jsfiddle中使用相同的代码而使用'class'而不是'className'时，文本颜色将会改变。

 <div className="search float-right">

                <input className="form-control"/>
                <a className="search-btn" ref='#'>search</a>

 </div>

.search {
padding: 10px;
margin: 10px;
display: flex;
}

.search input {
margin-right: 10px;

}

.search-btn {
border-radius: 10%;
border: 1px white solid;
padding-left: 5px;
padding-right: 5px;

}

.search-btn:hover {
color: #fc6d63;
border-bottom: solid deepskyblue 1px;
font-size: 20px;
}