在Input元素上删除addonBefore和addonAfter周围的附加填充

Question

我有一个addonBefore DropdownButton和一个Input元素中的addonAfter按钮。

它们有效，但它们会在元素周围创建额外的填充。

如何防止这种情况？

const searchDropDown = (
  <DropdownButton title="Dropdown">
    <MenuItem eventKey="1">Dropdown link</MenuItem>
    <MenuItem eventKey="2">Dropdown link</MenuItem>
  </DropdownButton>
);

const searchButton = (
  <button className="fa fa-search" />
);

return (
  <form className={styles.SearchBar}>

    <Input
      type="text"
      addonBefore={searchDropDown}
      addonAfter={searchButton}
      placeholder="Search..."
    />
  </form>
);

Answer 1

尝试将bsSize='small'或xsmall添加到输入本身或按钮。这帮助了我。