How to remove of MUI 5 TextField label without having notched style?

Viewed 1328

I'm working on replacing the DatePicker component in our app with the new @mui DatePicker, and I'm having some trouble getting the TextField to render without the floating label and the notched input style. Here is my latest attempt:

<LocalizationProvider dateAdapter={AdapterDateFns}>
  <DatePicker
    onError={(reason, value) => console.log(reason, value)}
    disableOpenPicker
    className={styles.datepicker}
    disableMaskedInput
    onChange={() => undefined}
    onAccept={handleAccept}
    open={datePickerVisible}
    value={getSafeDate(value) as Date}
    onClose={partial(handleDatepickerVisibilityChange, false)}
    {...datepickerProps}
    renderInput={(params) => (
      <TextField
        id={id}
        {...inputProps}
        {...params}
        onChange={handleInputChange}
        error={errorText !== null}
        helperText={errorText}
        onBlur={handleValueChange}
        onKeyPress={handleKeyPress}
        hiddenLabel
        size='small'
        fullWidth
      />
    )}
  />
</LocalizationProvider>

I've tried many different combinations for TextField props, such as adding InputLabelProps={{shrink:false}}, InputLabelProps={{shrink:true}}, and inputProps={{notched:false}} but always end up looking like this: wonky TextField style

Does anyone have an idea of how to correct this, or if it's possible? Thanks!

1 Answers

The issue was fixed in release v5.4.0

​[TextField] Remove notch when no label is added (#30560) @alisasanib

Updating to v5.4.0 should solve the issue.

Related