Reactjs 如何使用react中的“react bulma components”设置下拉按钮和下拉菜单的宽度，使其宽度填充父div？

在下面的代码中包括一个下拉按钮和一个包含许多下拉项的下拉菜单。单击下拉按钮时，将显示包含这些下拉项的下拉菜单。看起来是这样的：

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

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%}}，但没有一个有效。

到目前为止，在react-bulma组件中，在他们的官方文档中没有提到这样的功能来增加您请求的所选用户的宽度。只能使用sass变量增加/减少菜单的宽度

由于您是新的反应，您可以尝试它来查找下拉列表中的类，打开您的检查器并查找class=。。。价值观然后，您可以通过编写一个新的css来手动覆盖这些属性，如下所示：

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

我已经在沙盒中为您更新了相同的内容：

它给出了排序的输出：

---

让我知道这是否有帮助

到目前为止，他们似乎还没有为同一产品提供任何功能。scss中只有一个变量可以帮助您调整菜单宽度，但不能帮助您选择用户按钮。现在，您可以手动查找类，然后根据需要覆盖css。我刚刚开始学习React。您的解决方案对我来说似乎太难了，但谢谢您的快速回复。谢谢您的回答。如果我复制你的代码，我不能马上达到效果。我需要在下拉包装后添加列。下拉菜单为左对齐，但在宽度方面与下拉菜单不对齐。我用style={{width:100%}尝试了width，但什么也没发生。是的，可能发生了。我在这里写了非常简化的版本。如果您在某个项目中工作，其他css可能与此项目冲突。你需要知道css的特殊性是什么，以及如何覆盖css；然后，你可以在我给出的解决方案的基础上进一步发展，以实现这个结果。如果你正在做一些沙箱/小提琴或地方，你可以让你的来源，甚至结果可用，我可能可以帮助你。虽然你的回答没有立即解决我的问题。这给了我灵感，我可以覆盖自定义css中的默认样式，即使类名没有出现在我的代码中。因此，我同意你。谢谢你的帮助！