Material UI 组件（自动完成）即使 fullWidth={true} 也不会在网格内拉伸
Material UI component (Autocomplete) not stretching within Grid even with fullWidth={true}
这是我的这个项目的沙盒：https://codesandbox.io/s/gridnotworkingchildnotstretching-vk6ld
在 Home.jsx 中，我有一行 Grid，高度为 100vh，用于水平居中所有内容。在其中，我有一个列 Grid 和 alignItems="stretch" 实际将我的内容放在一个列中，其中包括一个 Typography，然后是一个 SearchBar，实际上是一个 [=18] =] 组件，以及一个 Button。因为我计划在其他地方使用 SearchBar，所以我向它传递了一个 home 属性，如果我们在主页上，它会被设置为 true，而我们确实是这样。我希望 Typography 和 Button 居中，而 SearchBar 拉伸到其父级的整个宽度，即 xs={10} sm={4}.
Typography 和 Button 看起来像我想要的那样，但由于某些原因 SearchBar 没有伸展到网格的宽度。我什至用 Autocomplete 组件设置了 fullWidth={home} 但它仍然没有拉伸。你能告诉我我的代码出了什么问题吗，或者是否可以做我想做的事？谢谢。
它看起来像是您在 searchBar.jsx 第 37 行中传递给自动完成组件的样式道具。尝试删除 style={{ width: 300 }}.
这是我的这个项目的沙盒：https://codesandbox.io/s/gridnotworkingchildnotstretching-vk6ld
在 Home.jsx 中，我有一行 Grid，高度为 100vh，用于水平居中所有内容。在其中，我有一个列 Grid 和 alignItems="stretch" 实际将我的内容放在一个列中，其中包括一个 Typography，然后是一个 SearchBar，实际上是一个 [=18] =] 组件，以及一个 Button。因为我计划在其他地方使用 SearchBar，所以我向它传递了一个 home 属性，如果我们在主页上，它会被设置为 true，而我们确实是这样。我希望 Typography 和 Button 居中，而 SearchBar 拉伸到其父级的整个宽度，即 xs={10} sm={4}.
Typography 和 Button 看起来像我想要的那样，但由于某些原因 SearchBar 没有伸展到网格的宽度。我什至用 Autocomplete 组件设置了 fullWidth={home} 但它仍然没有拉伸。你能告诉我我的代码出了什么问题吗，或者是否可以做我想做的事？谢谢。
它看起来像是您在 searchBar.jsx 第 37 行中传递给自动完成组件的样式道具。尝试删除 style={{ width: 300 }}.