如何在语义 UI React 中纠正不同 OS 的 CSS 差异？我在语义 UI React 中遇到 Form.Select 的问题

Question

我正在使用来自 Semantic UI React 的 Form.Select，并看到基于 OS 的不同行为。我已经在 macOS 和 Windows 上进行了测试，当在内部使用标签而不是作为选项道具传递时会出现问题。代码如下——

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

它在文档中看起来也不同，这里是 link - https://react.semantic-ui.com/collections/form/#shorthand-field-control-html 但我还附上了屏幕截图 -

Chrome 在 Mac 上OS

Mac 上的 SafariOS

Chrome 在 Windows

如果有人有解决方案，请告诉我，我也可以在 GitHub 回购上提出问题，但我认为在这里得到回复会更快。

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

编辑 2：将 'in Semantic UI React' 添加到问题 header。

Answer 1

这些示例只是表明您仍然可以将原生 html 标签与子 api 和字段控制一起使用，如果您有需要的话。这些 html 标签在呈现到您的 DOM 中时没有应用任何语义 UI class 名称，因此它们只有您使用的任何平台的原生样式正在。

我建议您不要将它们呈现为本机 HTML 标记，除非有某些技术原因需要这样做。为了在 OS/Browser 中保持一致的样式，使用语义 UI React 组件将为您提供保持一致性所需的 class 名称。以下任一方法都有效：

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 建议的解决方案使 select 在所有浏览器和平台上看起来都一样，并且还具有搜索功能。我找到了适合我的解决方案，但我不知道 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>

我选择这个解决方案的唯一原因是它允许用户使用键盘 select 选项。

如何在语义 UI React 中纠正不同 OS 的 CSS 差异？我在语义 UI React 中遇到 Form.Select 的问题

How to correct CSS differences for different OS in Semantic UI React? I am having issues with Form.Select in Semantic UI React

reactjs

semantic-ui

semantic-ui-react