Tengo estos componentes aquí:
Caja de arena: 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>Quiero que la primera entrada (la entrada de texto) ocupe todo el espacio restante en la página, ¿cómo hago eso?
Puede envolver los componentes de control de formulario usando Box en lugar del div actual.
<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>Si cree que los componentes seleccionados tienen un ancho grande, puede establecer el ancho personalizado.
Consulte la caja flexible