Material UI 所有組件在同一行，占滿寬度

Question

我這里有這些組件：

沙盒： https://codesandbox.io/s/6ipdf?file=/demo.js:78-129

   <FormControl sx={{ m: 1 }} variant="standard">
        <InputLabel htmlFor="demo-customized-textbox">Age</InputLabel>
        <BootstrapInput id="demo-customized-textbox" />
      </FormControl>
      <FormControl sx={{ m: 1 }} variant="standard">
        <InputLabel id="demo-customized-select-label">Age</InputLabel>
        <Select
          labelId="demo-customized-select-label"
          id="demo-customized-select"
          value={age}
          onChange={handleChange}
          input={<BootstrapInput />}
        >
          <MenuItem value="">
            <em>None</em>
          </MenuItem>
          <MenuItem value={10}>Ten</MenuItem>
          <MenuItem value={20}>Twenty</MenuItem>
          <MenuItem value={30}>Thirty</MenuItem>
        </Select>
      </FormControl>
      <FormControl sx={{ m: 1 }} variant="standard">
        <InputLabel htmlFor="demo-customized-select-native">Age</InputLabel>
        <NativeSelect
          id="demo-customized-select-native"
          value={age}
          onChange={handleChange}
          input={<BootstrapInput />}
        >
          <option aria-label="None" value="" />
          <option value={10}>Ten</option>
          <option value={20}>Twenty</option>
          <option value={30}>Thirty</option>
        </NativeSelect>
      </FormControl>

我希望第一個輸入（文本輸入）占用頁面上的所有剩余空間，我該怎么做？

Answer 1

您可以使用Box而不是當前的div來包裝表單控件組件。

<Box display="flex">
  <FormControl sx={{ m: 1, flexGrow: 1 }} variant="standard">
    <InputLabel htmlFor="demo-customized-textbox">Age</InputLabel>
    <BootstrapInput id="demo-customized-textbox" />
  </FormControl>
  ...
</Box>

如果覺得select組件的寬度偏大，那么可以設置自定義寬度。

參考flexbox