我正在尝试使用一个搜索栏css从代码笔。我使用了他们的确切代码，但是React的搜索栏似乎真的有问题。
这里是代码沙箱，以供更好的参考。https://codesandbox.io/s/sad-Moser-mdxmd？file=/src/dashboard.js
这是我目前使用的代码。
<div class="wrap">
<div class="search">
<input type="text" class="searchTerm" id="input_text"></input>
<button type="submit" class="searchButton">
<i class="fa fa-search"></i>
</button>
</div>
</div>
.search {
width: 100%;
position: center;
display: flex;
}
.searchTerm {
width: 100%;
border: 3px solid #00b4cc;
border-right: none;
padding: 5px;
height: 20px;
border-radius: 5px 0 0 5px;
outline: none;
color: #9dbfaf;
}
.searchTerm:focus {
color: #00b4cc;
}
.searchButton {
width: 40px;
height: 36px;
border: 1px solid #00b4cc;
background: #00b4cc;
text-align: center;
color: #fff;
border-radius: 0 5px 5px 0;
cursor: pointer;
font-size: 20px;
}
/*Resize the wrap to see the search bar change!*/
.wrap {
width: 30%;
position: flex;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
我希望搜索栏看起来像这样:在这里输入图像描述
这是指向我试图使用的代码的链接。
https://codepen.io/huange/pen/rbqsd
因为您使用的是简单的html，所以这里必须使用jsx。使用任何在线jsx转换器，如“https://magic.reactjs.net/htmltojsx.htm”等。为此，您可以使用:
null
<div className="wrap">
<div className="search">
<input type="text" className="searchTerm" id="input_text" />
<button type="submit" className="searchButton">
<i className="fa fa-search" />
</button>
</div>
</div>