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

Question

目前我正在使用语义 UI 开发一个 React 页面，我正在努力寻找最简单的方法来获取带圆角的输入组件。仅仅像往常一样应用 border-radius 似乎不起作用；有没有人有更好的主意？

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

Answer 1

SUI 和 SUIR 中表单和输入元素的样式和呈现有点棘手。尤其是当您将呈现的标记抽象为 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 上，则上述内容可能没问题。实际上并非所有人都是。如果我们想在 React 中使用 styles prop.

专门传递样式，一些样式明确地以 .ui.input > input {...} 为子 <input> 目标，这就是我们的问题所在

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

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

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

What's the easiest way to get inputs with rounded corners?

jsx

semantic-ui-react