Question

我正在尝试在React - Bootstrap中实现Popover with overlay trigger。

我使用此代码实现了它：

var {Button, Overlay, OverlayTrigger, ButtonToolbar, Popover} = require('react-bootstrap');

...
<ButtonToolbar>
<OverlayTrigger trigger="click" placement="left" overlay={<Popover title="Popover left"><strong>Holy guacamole!</strong> Check this info.</Popover>}>
  <Button bsStyle="default">Holy guacamole!</Button>
</OverlayTrigger>
</ButtonToolbar>

我使用Inspect-Element比较它们。我注意到当我检查元素时，我的实现没有.popover样式。此外，原始版本中的pseudo组件（反应引导程序网站中的示例）后面有一个::after arrow元素。我的实现中也缺少::after组件。我不确定为什么风格混乱/被覆盖。我认为，按照这一行，我正确地包括了所有内容：

var {Button, Overlay, OverlayTrigger, ButtonToolbar, Popover} = require('react-bootstrap');

最后，我在实现中看不到Popover的小箭头。为什么::after消失了？如何在实现中看到小箭头（三角形css）？

Answer 1

我们使用的反应引导程序需要以前缀为前缀才能正常工作。所以我需要进入react-bootstrap并使用popover前缀加上前缀arrow，bt3-。然后导入了所有样式。

Answer 2

在我的情况下，问题是我在OverlayTrigger的overlay道具上传递了包装器组件，如下所示：

function Wrapper(){
     return <Popover 
              /*props...*/ 
     />
}
<OverlayTrigger trigger="click" placement="left" overlay={<Wrapper/>}>
     <Button bsStyle="default">Holy guacamole!</Button>
</OverlayTrigger>

代替这样的组件：

const popover =<Popover 
              /*props...*/ 
     />
<OverlayTrigger trigger="click" placement="left" overlay={popover }>
     <Button bsStyle="default">Holy guacamole!</Button>
</OverlayTrigger>

Answer 3

您需要在 base.js 中添加样式，因为 popover 在渲染时不在正文中，它会在运行时像 modal 一样出现。所以你需要在你的 base.js 样式中修改 popover 类

.popover{background-color:aliceblue}

React-Bootstrap的Popover样式未应用于我的组件。

3 个答案: