Bootstrap 下拉按钮样式

Question

我有以下代码：

header_contents.push(<DropdownButton bsSize='xsmall' bsStyle='link' pullRight={true} id={1} title='Menu'>
    {item_menu}
  </DropdownButton>);

我希望 Bootstrap 中的样式为白色字体（当前为蓝色），因为我认为 link 选项默认为该样式。如何更改 Bootstrap 的样式以传递 link 颜色，以及其他属性，例如如果您想将 link 在页面上向下移动一点？

我应该提一下，我们做的很少 CSS 样式化，因为大部分是在 ReactJS 组件中完成的。

Answer 1

要么在 css 文件中覆盖 bootstrap CSS（据我所知，这是你似乎要避免的）：这是确保对每个 link 在您的应用程序中。

或者不将 bsStyle='link' 发送为 DropdownButton 属性，而是插入带有自定义 CSS 的 style 属性。然而，即使不删除 bsStyle，也可以插入 style。然后您可以创建自己的组件包装 DropdownButton 以确保您的应用程序中的图表相同。

Answer 2

我是在在线聊天室的帮助下弄明白的。这是我所做的。

我先在react组件中做了一个样式（dropDownLinkStyle）是这样的

let dropDownLinkStyle = {
  color: 'white'
};

然后我就这样在dropdownButton中使用了它(dropDownLinkStyle)

header_contents.push(<DropdownButton bsSize='large' style={dropDownLinkStyle} bsStyle='link' pullRight={true} id={1 /* avoids react warning */} title='Menu'>
    {item_menu}
  </DropdownButton>);

希望对您有所帮助。这让我可以保留 link 的 bsStyle（告诉 Bootstrap 我想在屏幕上输入 link 而不是按钮）并允许我将 link 更改为白色字体。我还可以通过将它添加到对象来传递更多样式 -- dropDownLinkStyle

Bootstrap 下拉按钮样式

Bootstrap DropdownButton Styling

reactjs

react-bootstrap