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

Question

目前我正在使用语义 UI 处理 React 页面，并且我正在努力寻找获得带圆角的 Input 组件的最简单方法。只是像往常一样应用 border-radius 似乎不起作用；有没有人有更好的想法？

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

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>

到目前为止是有道理的。但是仔细研究一下，我们会发现问题出在哪里的线索。当我们使用stylesprop时，我们认为内联样式将应用在哪里？在外面<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>

理论上，如果 Semantic UI 输入的样式仅在 parent 上，则上述内容可能没问题div.ui.input。并非所有这些实际上都是。有些款式明确针对孩子<input>与.ui.input > input {...}这就是我们的问题在于，如果我们想传递样式完全与阵营styles道具。

那么，我们如何在<input>不编写单独的、更具体的 CSS 来覆盖已编译的语义 UI 样式的情况下将样式添加到内部？幸运的是 Semantic UI React 实际上让你传递一个<input>as 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>

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