Search code examples
javascriptreactjsmaterial-uibackground-colorstyling

MaterialUI KeyboardDateTimePicker: change background color without changing spacing inside the component

I'm trying to change the background color on KeyboardDateTimePicker components, but however I noticed that when I add style={{background: "rgb(232, 241, 250)"}} background property to override the background color and I have inputVariant="filled" on this element, the background color seems to be mixing up and become darker than it is supposed to be. To resolve this problem I had to remove inputVariant="filled", I got the correct color this way but then padding between the text and component elements became incorrect (everything has shifted to the left top corner). How would I set background color with the correct RGB values without messing up the padding on the elements inside the component?

export function InquiryDateTimePicker(props: InquiryDateTimePickerProps) {
  return (
    <MuiPickersUtilsProvider utils={DateFnsUtils}>
        <KeyboardDateTimePicker
            // inputVariant="filled"
            style={{background: "rgb(232, 241, 250)"}}
            size="small"
            readOnly={true}
            fullWidth={true}
            format="yyyy.MM.dd HH:mm"
            id="time-picker"
            label="Дата поступления"
            value={props.selectedDate}
            onChange={() => {}}
            KeyboardButtonProps={{
                'aria-label': 'change time',
            }}
        />
    </MuiPickersUtilsProvider>
);}

issue screenshot

Solution

  • You can override styles for FilledInput:

    const theme = createMuiTheme({
  overrides: {
    MuiFilledInput: {
      root: {
        backgroundColor: 'unset'
      }
    }
  }
})

    and put your component in Theme Provider:

    <ThemeProvider theme={theme}>
  <InquiryDateTimePicker />
</ThemeProvider>