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

Question

我正在尝试在 React - Bootstrap 中使用覆盖触发器实现 Popover 。

它应该看起来像这样

我使用以下代码实现了它：

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之后有一个元素（react bootstrap 网站中的示例）。我的实现中也缺少arrow该组件。::after我不确定为什么样式会被弄乱/覆盖。根据这一行，我正确地包括了我认为的所有内容：

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

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

Answer 1

我们使用的 react bootstrap 需要加上前缀才能正常工作。所以我需要进入 react-bootstrap 和 prefix popover, arrow, with bt3-prefix。然后所有的样式都被导入了。

Answer 2

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

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 在渲染时不在正文中，它会在运行时像模态一样在运行时出现。所以你需要在你的 base.js 样式中修改 popover 类

.popover{background-color:aliceblue}