如何增加Semantic UI中单个选项的高度？

Question

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

 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 参数或修改 React index.css semantic-ui class name.

在您的情况下，要实现此目的，您需要使用带有和的下拉菜单，以指定要修改的确切项目：

<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

这应该可以，对不起我的英语。

如何增加Semantic UI中单个选项的高度？

How to increase the height of individual options in Semantic UI?

javascript

css

reactjs

semantic-ui