Блог

У меня есть такой код, написанный в semantic-ui-react :

 import styled from 'styled-components'
import { Grid } from 'semantic-ui-react'

const StyledMultiselect = styled(Multiselect)`
  width: 20em !important;
`

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

Где 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;
  
  .sub.header {
    display: inline-block !important;
    margin-left: 0.5em !important;
  }
 

Что я вижу, так это следующее:

И я хочу, чтобы заголовок и поле выбора были выровнены по вертикали. Я могу размещать InlineHeader и StyledMultiselect по-разному Grid.Column и выравнивать их с помощью marginTop свойств, но тогда поведение при изменении размера экрана намного хуже, и они расположены слишком далеко по горизонтали. Если они находятся в одном Grid.Column , то marginTop применить к InlineHeader ним не получится. Я пробовал вводить InlineHeader span и применять стили, но это тоже не работает. Применение marginTop или paddingTop к StyledMultiselect не работает. Есть какие-нибудь идеи о том, как выровнять их по вертикали в одном Grid.Column ?

Обновить

Что я заметил, так это то, что позиционирование правильное, пока я не добавлю multiple semantic-ui-react Form.Dropdown ( StyledMultiselect ), поэтому следующее расположено правильно по вертикали:

 <Form.Dropdown
  placeholder="Select project"
  inline
  selection
/>
 

Но если мы добавим multiple его, он соскользнет вниз в вертикальном положении (см. Скриншот выше).:

 <Form.Dropdown
  placeholder="Select project"
  inline
  selection
  multiple
/>
 

Проблема заключается в вводе типа множественного выбора в исходном CSS для SUI, а не в именах классов React. Похоже, вы пытаетесь бороться с ними, чтобы это сработало. Требуется только одно изменение CSS в строке, которое должно решить эту проблему для вас. Это также предполагает использование правильного доступного <label> тега для этого ввода вместо использования компонента заголовка.

 .ui.form .inline.field > .multiple.selection.dropdown {
  vertical-align: middle;
}
 

Вот кодовое поле с этим однострочным исправлением CSS, которое вы можете применить по мере необходимости к своему проекту, в зависимости от того, как вы обрабатываете свои стили.