如何在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;

我想实现的是拉伸“选择用户”按钮和下拉菜单，使它们的宽度如右下方的绿色按钮所示。我尝试了许多样式，例如style={{width: "100%"}}，但没有一个起作用。

Answer 1

到目前为止，在react-bulma-components中，尚无此类功能（在其官方文档中提到）来增加您要的Select User的宽度。您只能使用sass变量$dropdown-menu-min-width

增加/减少菜单的宽度

由于您是新手，您可以尝试尝试查找下拉列表的类（打开检查器，查找class =“ ...”值）。然后，您可以通过编写类似以下内容的新CSS来手动覆盖属性：

$dropdown-menu-min-width

我已经在沙箱中为您更新了相同名称：

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

它给出排序的输出：

https://codesandbox.io/s/xenodochial-aryabhata-kv9nw

让我知道是否有帮助。