我如何更改打开日期选择器按钮的颜色？

Question

import React from 'react'
import { DesktopDatePicker } from '@mui/x-date-pickers';

function DatePicker() {
    return (
        <DesktopDatePicker
            slotProps={{
                textField: {
                    variant: 'filled',
                    focused: true,
                    color: 'secondary',
                    sx: { mb: 3, ml: 5, color: 'red' }
                }
            }}
        />
    )
}

export default DatePicker

我想更改打开日期选择器的图标的颜色，但我不知道该怎么做

Answer 1

您可以使用名为 renderInput 的 prop，它可以简化非 Material UI 文本字段输入组件的使用： https://mui.com/material-ui/migration/pickers-migration/#render-input 在其中，您将编写一个组件来呈现一个 TextField，该 TextField 会传播现有参数并使用 prop SX 来设置自定义字段的样式。 你的代码应该是这样的：

<DesktopDatePicker
      label="Select Date"
      value={selectedDate}
      onChange={handleDateChange}
      renderInput={(params) => (
        <TextField
          {...params}
          label="Select Date"
          variant="filled"
          color="secondary"
          sx={{
            mb: 3,
            ml: 5,
            '& .MuiIconButton-root': { 
              color: 'red',
            }
          }}
        />
      )}
    />

Answer 2

<DesktopDatePicker
  label="Select Date"
  value={selectedDate}
  onChange={handleDateChange}
  renderInput={(params) => (
    <TextField
      {...params}
      label="Select Date"
      variant="filled"
      color="secondary"
      sx={{
        mb: 3,
        ml: 5,
        '& .MuiIconButton-root': { 
          color: 'red',
        }
      }}
    />
  )}
/>