Use MenuProps attribute of Select element <Select MenuProps={{ anchorOrigin: { vertical: “bottom”, horizontal: “left” }, transformOrigin: { vertical: “top”, horizontal: “left” }, getContentAnchorEl: null }} > <MenuItem value={10}>Ten</MenuItem> <MenuItem value={20}>Twenty</MenuItem> <MenuItem value={30}>Thirty</MenuItem> </Select>
Add two props fullWidth and maxWidth=”md” in your Dialog component like this : <Dialog {…your_other_props} fullWidth maxWidth=”sm” > {/* Your dialog content */} </Dialog> You can change md to sm, xs, lg and xl as per your requirement.
2022 Update (MUI v5): MUI v5 now relies on the CSS grid. Check out the official documentation here: https://mui.com/system/grid With this setup, you can set display: “grid”, gridTemplateColumns: “repeat(5, 1fr)” on the container Box element to render 5 grid items with the same width and height. See an example with both fixed and variable number … Read more
For React 16.8.6, you should use the inputRef property of TextField to set focus. I tried ref property but it doesn’t work. <TextField inputRef={input => input && input.focus()} /> Material-ui doc says: inputRef: Use this property to pass a ref callback to the native input component.