用 reactstrap 做一个宽阔的下拉

Question

我正在尝试制作一个宽大的下拉菜单，以在其中显示一个登录表单，并且我正在为此尝试使用 Reactstrap：

这是代码：

import React, { useState } from 'react';
import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';

const Example = (props) => {
  const [dropdownOpen, setDropdownOpen] = useState(false);

  const toggle = () => setDropdownOpen(prevState => !prevState);

  return (
    <Dropdown isOpen={dropdownOpen} toggle={toggle}>
      <DropdownToggle caret>
        Dropdown
        </DropdownToggle>
      <DropdownMenu>
        <DropdownItem header>Header</DropdownItem>
        <DropdownItem>Some Action</DropdownItem>
        <DropdownItem disabled>Action (disabled)</DropdownItem>
        <DropdownItem divider />
        <DropdownItem>Foo Action</DropdownItem>
        <DropdownItem>Bar Action</DropdownItem>
        <DropdownItem>Quo Action</DropdownItem>
      </DropdownMenu>
    </Dropdown>
  );
}

export default Example;

我希望下拉菜单的宽度为 500 像素，我该怎么做？有可能吗？

Answer 1

我认为你可以使用 reactStrap class 来做到这一点，你可以尝试以下 css as

 .dropdown-menu {
   width: 500px;
 }

希望对你有帮助

Answer 2

您必须覆盖下拉菜单的 bootstrap css。工作 Example

用 reactstrap 做一个宽阔的下拉

making a wide drop down with reactstrap

css

reactjs

dropdown

reactstrap