React Material UI Change Height of Textfield

Question

How do I properly change the height of React Material UI v4 Textfield? The following code messes up the label. Looking for a simple and easy method.

export const useTextFieldStyles = makeStyles({
  root: {
    minHeight: '42px',
  },
});

<TextField
{...params}
margin="dense"
value={listItem}
InputProps={{
  classes: {
    input: textFieldStyles.root,
  },
}}
/>

Referring to this link: Set TextField height material-ui

Have you tried height instead of minHeight? Is it the same behaviour with the label? — Aymendps, Jul 08 '22 at 22:36
did you checked `size` props of `TextField` also you can use the `sx` props and directly add height. — Prashant Jangam, Jul 09 '22 at 08:54
hi, I have MU version 4, so I don't believe sx is possible, size does not work either — mattsmith5, Jul 09 '22 at 09:09
hi @AymenHammami why was this voted down? thanks, trying to learn — mattsmith5, Jul 09 '22 at 21:25

score 1 · Accepted Answer · answered Jul 10 '22 at 12:29

1

You can do this with changing style of mui component in your style classes like this

MuiInputLabel-outlined.MuiInputLabel-shrink 
{
  padding: .3rem !important;
  transform: translate(-14px, -14px) scale(0.7) !important;
}

You can change my params

answered Jul 10 '22 at 12:29

sajadab

383
2
11

please upvote my question also, thanks, I sent points – mattsmith5 Aug 21 '22 at 22:16

score 0 · Answer 2 · edited Aug 25 '23 at 19:44

0

The input element has a padding and is wrapped inside a div. To change the padding use:

<TextField
  inputProps={{ style: { padding: '10px' } }}
  ...
/>

You can use this for basically any style.

edited Aug 25 '23 at 19:44

LW001

2,452
6
27
36

answered Aug 23 '23 at 05:43

s0h3i1

1
2

React Material UI Change Height of Textfield

2 Answers2