Dropdown in semantic ui can't be made of multiple selection type when wrapped with styled-components

问题

I am using react semantic ui Dropdown:

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

and styled-components:

https://styled-components.com/

And when I do the following (in React render method), it works well:

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

I can select multiple items in it. But now I am trying to style it the following way:

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

and then in render:

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

And it becomes not multiple with only one selection possible. How to still make it multiple? I tried supplying it in attrs like this:

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

and also directly in the styled properties:

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

But neither is working.

回答1:

I was able to style the Dropdown but indirectly by styling the Grid.Row that everything was wrapped in:

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

And then html:

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

来源：https://stackoverflow.com/questions/59846128/dropdown-in-semantic-ui-cant-be-made-of-multiple-selection-type-when-wrapped-wi