如何在 React 中使用 "react-bulma-components" 设置下拉按钮和下拉菜单的宽度，以便它们的宽度填充父级 div？

Question

下面代码中的

<Dropdown> 包括一个下拉按钮和一个包含许多下拉项的下拉菜单。单击下拉按钮时，将出现包含这些下拉项的下拉菜单。它看起来像这样：

下面是实现图中效果的代码：

import React, { Component } from "react";
import { Dropdown } from "react-bulma-components";


class Card extends Component {
    render() {
        return (
            <div className="card is-vcentered columns" style={{display: "block"}}>
                <section className="hero is-light is-small">
                    <div className="hero-body">
                        <div className="container">
                            <p className="title is-6 has-text-centered">Welcome to the Would You Rather App!</p>
                            <p className="subtitle is-7 has-text-centered">Please sign in to continue</p>
                        </div>
                    </div>
                </section>
                <figure className="image container is-128x128">
                    <img src="https://live.staticflickr.com/65535/49168480441_edbb9c3337_o_d.jpg" />
                </figure>
                <div className="column is-full">
                <p className="title is-5 has-text-primary has-text-centered">Sign In</p>
                </div>
                <div style={{border: "1px solid", textAlign: "center"}}>
                    <Dropdown label={"Select User"} className="is-fullwidth">
                        <Dropdown.Item value="james">
                            James
                        </Dropdown.Item>
                        <Dropdown.Item value="bob">
                            Bob
                        </Dropdown.Item>
                        <Dropdown.Item value="alice">
                            Alice
                        </Dropdown.Item>
                        <Dropdown.Item value="carol">
                            Carol
                        </Dropdown.Item>
                        <Dropdown.Divider />
                        <Dropdown.Item value="barron">
                            Barron
                        </Dropdown.Item>
                    </Dropdown>
                </div>
                <div className="column is-full" style={{margin: 0}}>
                    <button className="button is-primary is-fullwidth">
                        <strong>Sign In</strong>
                    </button>
                </div>
            </div>
        )
    }
}

export default Card;

我想要实现的是拉伸 "Select User" 按钮和下拉菜单，使它们的宽度与正下方的绿色按钮一样。我尝试了很多样式，例如 style={{width: "100%"}}，但其中 none 有效。

Answer 1

截至目前，在 react-bulma-components 中没有这样的功能（在他们的官方文档中提到）来增加您要求的 Select User 的宽度。您只能通过使用 sass 变量 $dropdown-menu-min-width

来 increase/decrease 菜单的宽度

由于您是 React 新手，您可以尝试使用它来寻找下拉菜单的 classes（打开检查器并寻找 class="..."值）。然后你可以通过编写一个新的 css 像这样的东西来手动覆盖属性：

.dropdown {
  width: 100%;
}
.dropdown-trigger {
  width: 100%;
}
button {
  width: 100%;
}

我已经在沙盒中为您更新了同样的内容：https://codesandbox.io/s/xenodochial-aryabhata-kv9nw

它给出排序的输出：

如果这有帮助，请告诉我。

如何在 React 中使用 "react-bulma-components" 设置下拉按钮和下拉菜单的宽度，以便它们的宽度填充父级 div？

How to set the width of dropdown button and dropdown menu using "react-bulma-components" in React so their width fill the parent div?

reactjs

bulma