即使使用 fullWidth={true}，Material UI 组件（自动完成）也不会在 Grid 中拉伸

Question

这是我的这个项目的沙盒：https://codesandbox.io/s/gridnotworkingchildnotstretching-vk6ld

在 Home.jsx 中，我有一行 Grid 高度为 100vh 以水平居中所有内容。在其中，我有一个列Grid 和alignItems="stretch" 来实际将我的内容放在一个列中，其中包括一个Typography，然后是一个SearchBar，它实际上是一个Autocomplete 组件，以及一个Button。由于我计划在其他地方使用SearchBar，因此我将home 属性传递给它，如果我们在主页上，则该属性设置为true，我们就是。我希望Typography 和Button 居中，而SearchBar 拉伸到其父级的全宽，即xs={10} sm={4}。

Typography 和 Button 看起来就像我想要的那样，但由于某种原因，SearchBar 没有延伸到网格的宽度。我什至用Autocomplete 组件设置了fullWidth={home}，但它仍然没有拉伸。你能告诉我我的代码出了什么问题，或者是否可以做我想做的事？谢谢。

Answer 1

它看起来像您在 searchBar.jsx 第 37 行中传递给自动完成组件的样式道具。尝试删除 style={{ width: 300 }}。