Question

是否可以在Popover组件中使用MenuItem并仍然保留样式。现在我得到menuitem（没有样式），当我只使用MenuItem组件时。当我将其包裹在里面时，没有任何东西可见。

<Overlay
  show={this.state.isOpen}
  target={this.state.target}
  placement="bottom"
  container={this}
>
  <Popover
    id="profilePopover"
    title={`Hello ${givenName || ''}${surname || ''}`}
  >
    <strong>Holy guacamole!</strong> Check this info.
    <Clearfix>
      <ul className="dropdown-menu open">
        <MenuItem>link</MenuItem>
      </ul>
    </Clearfix>
  </Popover>
</Overlay>

Answer 1

您将在popover类中返回多个项目。

<Overlay
  show={this.state.isOpen}
  target={this.state.target}
  placement="bottom"
  container={this}
>
  <Popover
    id="profilePopover"
    title={`Hello ${givenName || ''}${surname || ''}`}
  >
 {
<div>
<strong>Holy guacamole!</strong> Check this info.
<Clearfix>
<ul className="dropdown-menu open" style={{display:"block", position: "relative"}}>
   <MenuItem>Test</MenuItem>
   <MenuItem>Test2</MenuItem>
</ul>
</Clearfix>                                                                        </div>                                                                           }
  </Popover>
</Overlay>

它与classname＆＃34;下拉菜单打开＆＃34;有关。尝试在其中添加样式

Answer 2

谢谢大家，我创建了自定义popover元素，并抛出了一些自定义.css，我可以在popover中看到menuItem。虽然我还没有纠正arrowOffset值并且顶部对齐不起作用......对他们来说是单独的问题。

        <Overlay
          show={this.state.isOpen}
          target={this.state.target}
          container={this}
          placement="bottom"
          arrowOffsetTop="-6px;"
          arrowOffsetLeft="79%;"
        >
          <PopoverAligned
            links={links}
            givenName={givenName}
            surname={surname}
            greetingText={greetingText}
          />
        </Overlay>


const PopoverAligned = props => (
  <Popover
    id="profilePopover"
    title={`${props.greetingText} ${props.givenName || ''} ${props.surname || ''}`}
    className="dropdown-menu open"
    placement="bottom"
    style={{ top: '43px;', left: '-100px' }}
  >
    {
      props.links.map(link => (
        <li className="menuitem">
          <a href={link.url} target={link.target} className="dropdown-link">
            {link.title}
          </a>
        </li>
    ))
    }
  </Popover>
);

React-bootstrap： - 可以在Popover中使用MenuItem

2 个答案: