如何在语义界面中增加单个选项的高度？
提问于 2021-02-07 22:11:36
是否可以在语义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
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-02-07 22:57:05
有两种方法可以在react中更改或覆盖语义ui样式，一种是在你的css模块中使用!important参数，或者用语义ui类名修改react index.css。
在您的案例中，您需要使用带有和的dropdown来指定要修改的确切项：
<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 DropdownExampleSelectionhttps://react.semantic-ui.com/modules/dropdown/#types-dropdown
这应该行，对不起，我的英语。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/66093641
复制相关文章
腾讯云开发者
