如何设置语义UI下拉列表大小以匹配按钮等

假设你的下拉列表中有 button 选项集,您可以在 className

<Dropdown text='Add Friend' icon='plus' labeled button className='icon tiny'> 

我认为正确的方法应该是将其包装在表单中,并将大小类应用于表单。表单可以是表单标签,也可以是div:

<form className='ui form small'>
 <Dropdown>

或

<div className='ui form mini'>
 <Dropdown>

size 属性,您可以将下拉列表放在按钮内:

import React from 'react'
import { Dropdown, Menu, Button } from 'semantic-ui-react'

const options = [
  { key: 1, text: 'Choice 1', value: 1 },
  { key: 2, text: 'Choice 2', value: 2 },
  { key: 3, text: 'Choice 3', value: 3 },
]

const DropdownExampleSimple = () => (
  <div>
    <Button size="tiny" >
      <Dropdown text='Dropdown' options={options} simple item />
    </Button>
    <Button size="tiny">
      This is Button
    </Button>
  </div>
)

export default DropdownExampleSimple

结果如下:

我引用了 this answer 找到解决方案。我不得不给一个css类 line-height: unset;

HTML

<Dropdown className="equal-dropdown-height" placeholder="State" options={stateOptions} search selection />

CSS

.equal-dropdown-height .text {
  line-height: unset;
}

icon={null} 然后设置 trigger

import React from 'react'
import { Dropdown, Icon } from 'semantic-ui-react'

const LargeIconDropdown = () => (
    <Dropdown
        icon={null}
        trigger={
            <Icon
                link
                name='ellipsis vertical'
                size='large'
            />
        }>
        <Dropdown.Menu>
            <Dropdown.Item
                icon='pencil'
                text='Edit'
            />
        </Dropdown.Menu>
    </Dropdown>
)

export default LargeIconDropdown

您可以在语义UI React下拉文档中找到这方面的示例 here