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

Question

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

我用这段代码实现了它：

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 样式的 none 用于我的实现。此外，在原始 arrow 组件之后有一个 pseudo ::after 元素（反应 bootstrap 网站中的示例）。我的实现中也缺少 ::after 组件。我不确定为什么样式是 messed-up/overwritten。根据这一行，我正确地包括了我认为的所有内容：

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

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

Answer 1

我们使用的反应 bootstrap 需要加上前缀才能正常工作。所以我需要进入 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 中添加样式，因为弹出窗口在渲染时不在正文中，它将在运行时像模态一样出现。所以你需要修改 base.js 样式

中的 popover class

.popover{background-color:aliceblue}

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

Style of Popover from React-Bootstrap is not being applied to my component.

css

twitter-bootstrap

react-bootstrap

bootstrap-popover