如何在semantic-ui-react单个Grid.Column内垂直对齐表头与多选下拉框

问题根因 #

带multiple属性的Semantic UI多选下拉框默认渲染为inline-block元素，和同是inline-block的InlineHeader默认按照文本基线对齐，因此会出现下拉框垂直向下偏移的问题，单独给两个组件设置margin不生效通常是因为Semantic UI内置组件样式优先级更高，导致自定义样式被覆盖。

解决方案 #

方案1：使用flex布局容器（推荐，适配性最好）

不需要修改原有两个组件的样式，只需要在同一Grid.Column内给两个元素套一层flex容器，通过flex的垂直居中属性实现对齐，天然适配不同屏幕缩放比例，间距也更可控：

1. 首先定义flex容器：

import styled from 'styled-components'

const InlineControlGroup = styled.div`
  display: flex;
  align-items: center;
  /* 控制两个元素的水平间距，可自行调整 */
  gap: 1em;
`

2. 替换Grid.Column内的结构：

<Grid.Column width={6}>
  <InlineControlGroup>
    <InlineHeader content="Add Project:" />
    <StyledMultiselect
      placeholder="Select project"
      onChange={(v) => addElement(processAddedElement ? processAddedElement({ key: v }) : v)} 
      options={projectNames}
      inline
    />
  </InlineControlGroup>
</Grid.Column>
<Grid.Column width={6}>
  <InlineControlGroup>
    <InlineHeader content="Add Project Group:"/>
    <StyledMultiselect
      placeholder="Select project group"
      onChange={(v) => addProjectGroup(v, addElement)}
      options={projectGroupNames}
      inline
    />
  </InlineControlGroup>
</Grid.Column>

方案2：修改元素垂直对齐属性

如果不想新增容器，直接给两个组件加上vertical-align: middle属性，覆盖默认的基线对齐规则即可：

1. 修改InlineHeader的样式定义：

export const InlineHeader = styled(({ marginTop, ...props }) => <Header {...props} />)`
  display: inline-block;
  margin-right: 1em !important;
  margin-top: ${props => props.marginTop || "0em"} !important;
  margin-bottom: 0 !important;
  /* 新增垂直居中对齐规则 */
  vertical-align: middle !important;
  
  .sub.header {
    display: inline-block !important;
    margin-left: 0.5em !important;
  }
`

2. 修改StyledMultiselect的样式定义：

const StyledMultiselect = styled(Multiselect)`
  width: 20em !important;
  /* 新增垂直居中对齐规则 */
  vertical-align: middle !important;
`

内容的提问来源于stack exchange，提问作者Nikita Vlasenko