引导DropdownButton样式

Question

我有以下代码：

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

我希望在引导带的样式是白色字母(目前蓝色)，因为我认为链接选项是默认的。如何更改Bootstrap的样式以传递链接颜色，以及其他属性(例如，如果您想在页面上向下移动链接)？

我应该提到，我们很少使用CSS样式，因为大多数样式都是在ReactJS组件中完成的。

Answer 1

我在网上聊天室的帮助下弄明白了这一点。我就是这么做的。

我首先在react组件中创建了一个样式(dropDownLinkStyle)，如下所示。

let dropDownLinkStyle = {
  color: 'white'
};

然后我像这样在dropdownButton中使用它(DropdownButton)。

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

我希望这能帮到你。这允许我保留我的bsStyle，即链接(告诉Bootstrap，我希望在屏幕上输入链接类型，而不是按钮)，并允许我将链接更改为白色字母。我也可以通过将它添加到对象-- dropDownLinkStyle来传递更多的样式。

Answer 2

要么重写CSS文件中的引导css (这是我所理解的)：这是确保应用程序中的每个链接都具有全局效果的更好方法。

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