主页 / coding / 问题 / 78275408
Accepted
Maksim Ostroginskiy
Asked: 2024-04-05 00:53:46 +0800 CST

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

  • 772
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

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

material-ui

2 个回答

  1. Best Answer

    您可以使用名为 renderInput 的道具来简化使用非材质 UI 文本字段输入组件： https://mui.com/material-ui/migration/pickers-migration/#render-input 在其中您将编写一个渲染组件TextField 扩展现有参数并使用 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',
            }
          }}
        />
      )}
    />
    • 0 
  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',
        }
      }}
    />
  )}
/>
    • 0

相关问题