如何更改React Bootstrap分割按钮的样式

Question

如何更改React Bootstrap分割按钮的样式

我使用了 React bootstrap split 按钮，如下所示

   <ButtonToolbar>
    <SplitButton bsStyle="primary" title="Right dropup" 
    dropup pullRight id="split-button-dropup-pull-right">
    <MenuItem eventKey="1">Action</MenuItem>
    <MenuItem eventKey="2">Another action</MenuItem>
    <MenuItem eventKey="3">Something else 
      here</MenuItem>
    <MenuItem divider />
    <MenuItem eventKey="4">Separated link</MenuItem>
  </SplitButton>
</ButtonToolbar>

);

我想对按钮应用一些其他颜色和样式。 我尝试使用 className 但它仅适用于按钮部分而不是箭头（插入符号）部分

那么我该怎么做呢？

Answer 1

文档说

与

DropdownButton

一样，

SplitButton

作为 convenience 组件提供。

来源：https://react-bootstrap.netlify.app/docs/components/dropdowns/#split-button-dropdowns

你的解决方案应该是（不方便）：

<Dropdown as={ButtonGroup}>
  <Button variant="primary">Right dropup</Button>
  <DropdownToggle split>
    <i className="fa fa-caret-down text-danger"></i>
  </DropdownToggle>
  <DropdownMenu>
    <DropdownItem href="#">...</DropdownItem>
    <DropdownItem href="#">...</DropdownItem>
  </DropdownMenu>
</Dropdown>