Question

我有以下代码：

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

我想让Bootstrap中的样式为白色字体（目前为蓝色），因为我认为链接选项是默认的。如何更改Bootstrap的样式以传递链接颜色，以及其他属性，例如，如果要在页面上稍微移动链接？

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

Answer 1

在css文件中覆盖bootstrap CSS（这是你似乎避免理解的）：这是确保应用程序中每个链接产生全局效果的更好方法。

或者不将bsStyle='link'作为DropdownButton属性发送，而是使用自定义CSS插入style属性。但即使您不删除style，也可以插入bsStyle。然后，您可以创建自己的包裹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>);

我希望这会有所帮助。这允许我保留我的bsStyle这是链接（告诉Bootstrap我想要一个链接类型在我的屏幕上而不是一个按钮）并允许我将该链接更改为白色字体。我还可以通过将其添加到对象 - dropDownLinkStyle

来传递更多样式

Bootstrap DropdownButton样式

2 个答案: