How to remove default dashes on MUI Textfield on type "date" and "time"

user_15275208 0
Viewed 139

enter image description here

I have 3 mui textfields with type "date" and "time" and they all have these ugly dashes which overflow with the textfield's label. When I put a value in the fields everything is ok, as in the picture, but if there is nothing it gets really ugly. Is there some way of removing the dashes from the 1st image.

Here is example of 1 of the textfields:

   <TextField
            required
            className="form__input time"
            id="endTime"
            name="endTime"
            value={formData.endTime}
            label="End Time"
            variant="outlined"
            type="time"
            onChange={(event) => eventHandleChange(event)}
          />
material-ui textfield
1 Answers

TextField component consists of several components and the one responsible for rendering label is InputLabel. To fix the overflowing issue you should add InputLabelProps={{shrink:true}} to your TextField component:

      <TextField
        InputLabelProps={{ shrink: true }}
        type="date"
        id="outlined-basic"
        label="Outlined"
        variant="outlined"
      />
user_141906900
Related