如何在 Material UI 中使组件具有响应性？答案

【问题标题】：How can I make a component responsive in Material UI?如何在 Material UI 中使组件具有响应性？
【发布时间】：2022-06-27 22:26:41
【问题描述】：

我对 Material UI 比较陌生，我设计了一个搜索类型的文本字段。我希望它能够响应。但我无法以宽度小于 423 的屏幕尺寸呈现文本字段

<Box
  sx={{ flexGrow: 1 }}
  m={5} pt={5}
  display="flex"
  justifyContent="flex-end"
  alignItems="flex-end"
>
  <Grid item sx={{ flexGrow: 1 }} spacing={{ xs: 1, md: 2,lg:2}} columns={{ xs: 2, sm: 2, md: 12 ,lg: 22}} display="flex"
justifyContent="center"
alignItems="center" marginLeft={8} marginRight={1} mt={4} width='100%'>
    <SearchIcon style={{ coSelf: "center", margin: "5px" }} />
    <TextField
      id="standard-search"
      label="Search for a company..."
      type="search"
      variant="standard"
      textAlign="center"
      fullWidth

    />
  </Grid>
  <Button onClick={() => setLight((prev) => !prev)} variant="contained" color="primary" sx={{ height: 40 }}>
    <SettingsIcon/>
  </Button>
</Box>

感谢任何帮助。

【问题讨论】：

标签： reactjs material-ui material-design react-material formik-material-ui

【解决方案1】：

您的搜索组件似乎已呈现，但隐藏在股票市场图表标题后面，因为它在较小的屏幕尺寸中变得更长。如果您将其设置为 fixed 位置，请尝试将其更改为 relative 位置，或删除/减少其中的文本，使其变短以便快速测试并可能显示搜索组件。

【讨论】：