如何增加语义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中更改或覆盖semantic-ui样式，一种是使用css模块中的重要参数，或者用semantic-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

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