Material UI KeyboardDateTimePicker：更改背景颜色而不更改组件内部的间距

Question

我正在尝试更改 KeyboardDateTimePicker 组件的背景颜色，但是我注意到，当我添加 style={{background: "rgb(232, 241, 250)"}} 背景属性来覆盖背景颜色时，我有 inputVariant="filled" 在这个元素上，背景颜色似乎混合在一起并且变得比预期的更暗。为了解决这个问题，我不得不删除 inputVariant="filled"，我通过这种方式得到了正确的颜色，但是文本和组件元素之间的填充变得不正确（所有内容都移到了左上角）。我如何使用正确的 RGB 值设置背景颜色而不弄乱组件内元素的填充？

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>
);}

Answer 1

您可以覆盖 FilledInput 的样式：

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

并将您的组件放入 Theme Provider 中：

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

Material UI KeyboardDateTimePicker：更改背景颜色而不更改组件内部的间距

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

javascript

styling

background-color

reactjs

material-ui