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

Question

目前我正在使用 Semantic UI 处理 React 页面，并且我正在努力寻找最简单的方法来获取带圆角的 Input 组件。只是正常应用边界半径似乎不起作用；有人有更好的主意吗？

（澄清一下——我正在寻找与 Semantic-React 中搜索组件基本相同的外观。）

Answer 1

SUI 和 SUIR 中 Forms 和 Input 元素的样式和渲染有点棘手。尤其是当您将渲染的标记抽象为 React 组件时。

Semantic 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 上，则上述方法可能没问题。并非所有这些实际上都是。有些样式使用.ui.input > input {...} 明确地针对子<input>，如果我们想在React 中使用styles 属性专门传递样式，我们的问题就出在哪里。

那么，我们如何在不编写单独的、更具体的 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>

希望您能及时找到您之前问题的答案，以帮助您。我在下面放了一个快速截图来展示它的样子。