如何在语义UI React中更正不同操作系统的CSS差异？我在语义UI React中遇到Form.Select的问题

Question

我正在使用来自语义UI React的Form.Select，并基于操作系统看到了不同的行为。我已经在macOS和Windows上进行了测试，当标签在内部使用且未作为选项道具传递时，就会发生此问题。代码如下-

          <Form.Field label='An HTML <select>' control='select'>
           <option value='male'>Male</option>
           <option value='female'>Female</option>
          </Form.Field>

文档上的内容也有所不同，这是一个链接-https://react.semantic-ui.com/collections/form/#shorthand-field-control-html，但我还将附加屏幕截图-

1. 在macOS上使用Chrome

1. 在macOS上的Safari

1. Windows上的Chrome

请让我知道是否有人有解决方案，我也可以在GitHub存储库上打开问题，但我想在这里获得答复会更快。

编辑1 ：添加了Windows屏幕截图。

编辑2 ：在问题标题中添加了“在语义UI React中”。

Answer 1

这些示例仅表明，如果有必要，您仍可以将本机html标签与子api和字段控件一起使用。这些html标记在呈现到您的DOM中时，没有应用任何语义UI类名称，因此它们仅具有针对您所使用的平台的本机样式。

我建议您不要将它们呈现为本地HTML标记，除非出于某些技术原因需要这样做。为了在OS /浏览器之间实现一致的样式，使用语义UI React组件将为您提供实现一致性所需的类名。以下任何一种均可使用：

const options = [
  {key: 'male', value: 'male', text: 'Male'},
  {key: 'female', value: 'female', text: 'Female'},
]
<Form.Field>
  <label>A Semantic UI Form.Field and Select component</label>
  <Select options={options} search />
</Form.Field>

// or

<Form.Select
  label='A Semantic UI Form.Select component'
  options={options}
  search
/>

Here is a working Codesandbox example.

Answer 2

@brianespinosa提出的解决方案使选择在所有浏览器和平台上看起来都一样，并且具有搜索功能。我找到了适合我的解决方案，但我不知道SUIR团队是否推荐这种解决方案。我想知道他们对此的想法。这是我的解决方案-

<Form.Field as='select' className="ui dropdown">
 <option value='default'>Select your country</option>
 {
  countries.map(country => {
   return (
    <option key={country['alpha-2']} value={country['alpha-2']}>
     {country['name']}
    </option>
   )
  })
 }
</Form.Field>

我选择此解决方案的唯一原因是因为它允许用户使用键盘来选择选项。