Material-UI text field with dynamic rows

Question

I'm trying to have a multiline TextField component that takes all available space depending on a device.

I know fullWidth but is there a way to have something like fullHeight in rows setting, depending on a device that it is displayed on?

Answer 1

A solution is to manupulate Material-UI classes using JSS.

I change the height of the input base and align the text at start vertically.

const useStyles = makeStyles(() => ({
  input: {
    height: "100%",
    "& .MuiInputBase-root": {
      height: "100%",
      display: "flex",
      alignItems: "start"
    }
  }
}));

Add the input classes to your input and it's work.

All the exemple bellow on this codesandbox.