Question 219779 in CSS Question posted in
Some basic documentation can be found here.

Css – How can I apply padding to both the TextField input and label in Material UI?

I have started using Material UI for a project. I created a TextField for a form field as shown below. I am trying to apply padding to this input field as demonstrated below, but the label is not being affected by this padding.

<TextField
          sx={{ display: "flex", padding: "20px 0px" }}
          name="mail"
          label="Email"
          type="mail"
          id="mail"
          placeholder="Enter email"
          variant="standard"
          inputProps={{
            sx: {  fontSize: "13px", marginTop: "4px" }
          }}
          InputLabelProps={{
            shrink: true,
            sx: {
             fontSize: "12px"
            }
          }}
        />

What should I do in order to provide padding to the input along with the label?

Tags:

2

Answers


  1. 0

    The label is not affected by your padding changes because it is position: absolute making it a positioned element. You can move the label around by adding top, left, bottom, right props to the InputLabelProps sx value.

    InputLabelProps={{
  shrink: true,
  sx: {
   fontSize: "12px",
   left: "1rem",
   right: "1rem",
  }
}}

    Here is a Code Sandbox repro with the label moved to align with the inputs padding.

    And here’s a screenshot showing the result of adding top and left values to the InputLabelProps styling

    text field UI screenshot

    Hope this Helps!

    Login or Signup to reply.
  2. 0

    The input label has the absolute position. So padding and margin will not work here. top, bottom, right, and left positions will work. You can try the below code.

    <TextField        
    name="mail"
    label="Email"
    type="mail"
    id="mail"
    variant="standard"
    placeholder="Enter email"
    inputProps={{
      sx: { fontSize: "13px", marginTop: "4px" },
    }}
    InputLabelProps={{
      shrink: true,
      sx: {
        fontSize: "12px",
        bottom: "20px"
      },
    }}
  />
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search