来自React-Bootstrap的弹出窗口样式未应用于我的组件,

ubbxdtey 于 2022-12-07 发布在 Bootstrap

关注(0)|答案(4)|浏览(151)

我正在尝试在React-Bootstrap中实现带有覆盖触发器的弹出窗口。
It is supposed to look like this
我使用以下代码实现了它：

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对它们进行了比较。我注意到当我检查元素时，pseudo::after元素就在原始文件中的arrow组件之后（react bootstrap网站中的例子）。那个::after组件在我的实现中也不见了。我不知道为什么样式被弄乱/覆盖了。我认为我包含的所有内容都是正确的，就像下面这行：

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

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

twitter-bootstrap

来源：https://stackoverflow.com/questions/33812667/style-of-popover-from-react-bootstrap-is-not-being-applied-to-my-component

4条答案

按热度按时间

huwehgph1#

我也有这个问题，但不能按照建议的答案。相反，我能够找到一个例子的用法提供的github网站，这解决了我的问题：
参考：https://react-bootstrap.github.io/components/overlays/#popovers

import Button from 'react-bootstrap/Button';
import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
import Popover from 'react-bootstrap/Popover';

const popover = (
  <Popover id="popover-basic">
    <Popover.Header as="h3">Popover right</Popover.Header>
    <Popover.Body>
      And here's some <strong>amazing</strong> content. It's very engaging.
      right?
    </Popover.Body>
  </Popover>
);

const Example = () => (
  <OverlayTrigger trigger="click" placement="right" overlay={popover}>
    <Button variant="success">Click me to see</Button>
  </OverlayTrigger>
);

render(<Example />);

一开始我不是用Popover。Header之类的，所以这似乎是我的问题。希望这能帮助其他人。

赞(0）回复(0）举报 2022-12-07

iq3niunx2#

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

赞(0）回复(0）举报 2022-12-07

h5qlskok3#

在我的例子中，问题是我在OverlayTrigger的覆盖属性上传递了一个 Package 器组件，如下所示：

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>

赞(0）回复(0）举报 2022-12-07

rekjcdws4#

您需要在base.js中添加样式，因为popover在渲染时不在主体中，它将在运行时出现，就像modal一样。因此您需要在base.js样式中修改popover类