делая широкий выпад с реактивной лентой

Question

Я пытаюсь сделать широкий выпадающий список, чтобы показать форму входа в него, и я пытаюсь отреагировать на это:

это код:

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

Вы должны переопределить загрузочный css для выпадающего меню. Рабочая Пример

Answer 2

Я думаю, вы можете использовать для него класс ReactionStrap, вы можете попробовать следующее css как

 .dropdown-menu {
   width: 500px;
 }

Надеюсь, это поможет