Раскрывающийся список в semanti c пользовательский интерфейс не может быть сделан из нескольких типов выбора, когда обернут с помощью styled-компонентов

Question

Я использую react semantic ui Dropdown:

https://react.semantic-ui.com/modules/dropdown/

и styled-components:

https://styled-components.com/

И когда я делаю следующее (в методе React render), это работает хорошо:

          <Dropdown
            placeholder="Select tags"
            multiple
            fluid
            selection
            options={tagOptions}
            onChange={this.navigateToTag}
          />

Я могу выбрать несколько элементов в нем. Но сейчас я пытаюсь оформить его следующим образом:

const SelectTagsDropdown = styled(Dropdown)`
  margin: ${props => props.margin || '1em 0em 1em 0em'}
`

, а затем в render:

          <SelectTagsDropdown
            placeholder="Select tags"
            multiple
            fluid
            selection
            options={tagOptions}
            onChange={this.navigateToTag}
          />

И он становится not multiple только с one selection possible. Как еще сделать это multiple? Я попытался указать его в attrs следующим образом:

styled(Dropdown).attrs({ multiple: true, selection: true, fluid: true })

, а также непосредственно в свойствах styled:

const SelectTagsDropdown = styled(Dropdown)`
  margin: ${props => props.margin || '1em 0em 1em 0em'};
  multiple: ${props => props.multiple};
`

Но ни один из них не работает.

Answer 1

Я смог стилизовать Dropdown, но косвенно, стилизовав Grid.Row, в который все было завернуто:

const ControlRow = styled(Grid.Row)`
  .multiple.selection.dropdown {
      margin: 1em 0em 1em 0em !important;
  }
`

А затем html:

    <ControlRow>
        <Grid.Column width={5}>
          <Dropdown
            multiple
            fluid
            selection
            options={myOptions}
            onChange={this.navigateToMyFunc}
          />
     ...
     ...