javascript - 如何增加语义 UI 中单个选项的高度？

Question

是否可以更改 Semantic UI React 中单个选项的高度？或者有没有办法覆盖 CSS 类。
我可以在下拉组件上应用内联样式

 import React from 'react'
    import { Dropdown } from 'semantic-ui-react'
    import './currency-convertor.styles.css'
    
    const friendOptions = [
      {
        key: 'Jenny Hess',
        text: 'Jenny Hess',
        value: 'Jenny Hess',
        image: { avatar: true, src: '/images/avatar/small/jenny.jpg' },
      },
      {
        key: 'Elliot Fu',
        text: 'Elliot Fu',
        value: 'Elliot Fu',
     }
    ]
    
    const DropdownExampleSelection = () => (
      <Dropdown
       style={{width:'300px', height:'80px',fontSize:'20px'}}
       placeholder='Select Country'
        fluid
        search
        selection
        options={friendOptions}
      />
    )
    
    export default DropdownExampleSelection

Answer 1

有两种方法可以在 react 中更改或覆盖语义 UI 样式，一种是在您的 css 模块中使用 !important 参数，或者使用语义 UI 类名修改 react index.css。
在您的情况下，要实现这一点，您需要使用带有 和 的下拉菜单，以指定要修改的确切元素:

<Dropdown text='Select Country'> 
 <Dropdown.Menu> 
  <Dropdown.Item text='Jenny Hess' /> 
  <Dropdown.Item text='Elliot Fu' style={{width:'300px', height:'80px',fontSize:'20px'}} />
 </Dropdown.Menu>
</Dropdown>

然后，如果需要，您需要将每个friendOptions 映射到他自己的样式。

import React from 'react'
import { Dropdown } from 'semantic-ui-react'
import './currency-convertor.styles.css'

const friendOptions = [
  {
    key: 'Jenny Hess',
    text: 'Jenny Hess',
    value: 'Jenny Hess',
    image: { avatar: true, src: '/images/avatar/small/jenny.jpg' },
    style: { width:'300px', height:'80px',fontSize:'20px'}
  },
  {
    key: 'Elliot Fu',
    text: 'Elliot Fu',
    value: 'Elliot Fu',
 }
]

const DropdownExampleSelection = () => (
  <Dropdown text='Select Country'>
   <Dropdown.Menu>
    {friendOptions.map(item=><Dropdown.Item text={item.text} style={item.style || {}} /> )}        
   </Dropdown.Menu>
 </Dropdown>
)

export default DropdownExampleSelection

https://react.semantic-ui.com/modules/dropdown/#types-dropdown
这应该工作，对不起我的英语。