获得带有圆角的输入的最简单方法是什么？

Question

目前，我正在使用语义UI在React页面上工作，而我正在努力寻找获得带有圆角的Input组件的最简单方法。仅仅像往常一样应用边界半径似乎无效。有谁有更好的主意吗？

（为澄清起见，我正在寻找语义反应中搜索组件的基本外观。）

Answer 1

SUI和SUIR中Forms和Input元素的样式和渲染有些棘手。尤其是一旦将渲染的标记抽象到React组件中。

语义UI React中实际上发生了什么？让我们看一下：

// This...

<Input placeholder='Search...' />

// Renders this in the DOM

<div class="ui input">
  <input placeholder="Search..." type="text">
</div>

到目前为止，都有意义。但是仔细研究一下，我们可以知道问题出在哪里。当我们使用styles道具时，我们认为应该在哪里应用内联样式？在外部<div>或<input>上？

// This...

<Input 
  placeholder='Search...'
  styles={{borderRadius: '100px'}}
/>

// Renders this in the DOM - Not what we want :(

<div class="ui input" style="border-radius: 100px;">
  <input placeholder="Search..." type="text">
</div>

理论上，如果语义UI输入的样式完全在父div.ui.input上，则上述内容可能是可以的。实际上并非全部。某些样式明确地以<input>定位子.ui.input > input {...}，如果我们想使用styles道具在React中专门传递样式，这就是我们的问题所在。

那么，如何在不编写单独的，更特定的CSS来覆盖已编译的语义UI样式的情况下，在内部<input>上获取样式？幸运的是，语义UI React实际上使您可以将<input>作为React children进行传递。看看这个：

// This...
<Input placeholder='Search...'>
  <input style={{borderRadius: '100px'}} />
</Input>

// Gives us this, which is what we want!
<div class="ui input">
  <input placeholder="Search..." type="text" style="border-radius: 100px;"> . 
</div>

希望您能及时找到您先前问题的答案，以帮助您。我在下面提供了一个快速屏幕截图，以显示其外观。