CODEWITHSUNDEEP
reactjsmaterial-uimui-x-date-picker
Matouš Najman
Matouš Najman

Reputation: 1

Mui migration DatePicker v5 to v6, styling of input

i need help with migration from mui v5 to v6 with the styling of the TextField in mui DatePicker.

My DatePicker in v5:

<DatePicker
    value={fromDate}
    onChange={onFromDateChange}
    minDate={props.minDate}
    maxDate={props.maxDate}
    ignoreInvalidInputs
    inputFormat={DateConstants.DATE_YEAR}
    renderInput={(params) => <Styled.TextFieldFrom {...params} />}
    InputAdornmentProps={{ position: "start" }}
/>

My DatePicker in v6 (so far):

<DatePicker
    value={fromDate}
    onChange={onFromDateChange}
    minDate={props.minDate}
    maxDate={props.maxDate}
    format={DateConstants.DATE_YEAR}
    formatDensity="spacious"
/>

My DatePicker in v6 is working properly, the only problem i am having is with styling of the input. In v5 i was able to style my TextField directly.

My styles:

TextFieldFrom: styled(TextField)({
    paddingLeft: "1.4rem",
    ".MuiOutlinedInput-root": {
    ...inputCommonStyled,
    },
    ...textFieldCommonStyled,
}),

is there anyone who know how to pass custom styling to the input component using slots?

I have already tried doing it like this, but its not working.

slotProps={{
    textField: {
        InputProps: {
            startAdornment: <InputAdornment position="start" />,
        },
    },
}}

Upvotes: 0

Views: 583

Answers (1)

Dhruv Maindola
Dhruv Maindola

Reputation: 61

const TextFieldFrom = styled(TextField)({
   paddingLeft: "1.4rem",
   ".MuiOutlinedInput-root": {
   ...inputCommonStyled,
 },
...textFieldCommonStyled,
}),

Just pass this in textField in slots like this:

<DatePicker
  value={fromDate}
  onChange={onFromDateChange}
  minDate={props.minDate}
  maxDate={props.maxDate}
  format={DateConstants.DATE_YEAR}
  formatDensity="spacious"
  slots={{
    textField: TextFieldFrom
  }}
/>

Upvotes: 0

Related Questions