如何修改MUI X Date Picker组件中日历图标的颜色

你当前的写法问题在于内联style属性不支持CSS嵌套选择器（就是你用的& .MuiSvgIcon-root这种语法），内联style只能定义当前元素的样式，无法直接选中子元素。下面给你两种可行的解决方式：

方式一：通过DatePicker的sx prop全局定位图标 #

直接在DatePicker上用sx prop，精准选中末尾装饰器里的日历图标：

<DatePicker
  label="Controlled picker"
  value={value}
  onChange={(newValue) => setValue(newValue)}
  sx={{
    '& .MuiInputAdornment-positionEnd .MuiSvgIcon-root': {
      color: 'orange', // 图标颜色
      backgroundColor: '#f5f5f5', // 图标背景色
      padding: '3px', // 给背景加内边距，让背景更美观
      borderRadius: '3px' // 圆角处理
    }
  }}
/>

方式二：通过InputAdornmentProps的sx prop单独配置 #

如果只想针对InputAdornment内部的元素设置，把style换成sx即可（sx支持嵌套选择器）：

<DatePicker
  label="Controlled picker"
  value={value}
  onChange={(newValue) => setValue(newValue)}
  InputAdornmentProps={{
    sx: {
      '& .MuiSvgIcon-root': {
        color: 'orange',
        backgroundColor: '#f5f5f5',
        padding: '3px',
        borderRadius: '3px'
      }
    }
  }}
/>

两种方式都能实现你的需求，区别在于方式一的选择器范围更大，方式二更精准地针对InputAdornment内部的图标。如果需要调整背景的大小或其他样式，直接在sx里加对应的CSS属性即可。

内容的提问来源于stack exchange，提问作者john