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

Question

目前我正在使用 Semantic 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 上，则上述内容可能没问题。 。并非所有的人实际上都是这样。某些样式明确针对 child <input>与 .ui.input > input {...}如果我们想在 React 中使用 styles 专门传递样式，这就是我们的问题所在。 Prop 。

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

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