如何修改Material-UI React中TextField日期选择器的日历图标颜色？

你之前使用的.MuiSelect-icon仅适用于下拉选择组件的图标，日期选择器的日历图标挂载在输入框的尾部装饰器下，匹配对应类名修改样式即可生效，以下是适配你现有withStyles写法的修改方案：

修改后的代码 #

const TextField2 = withStyles({
  root: {
    '& .MuiInput-underline:after': {
      borderBottomColor: '#ffffff',
    },
    "& .MuiSelect-icon": {
      color: "#ffffff"
    },
    // 新增日期选择器图标样式匹配规则
    "& .MuiInputAdornment-root .MuiSvgIcon-root": {
      color: "#ffffff"
    },
  },
})(TextField);

补充说明 #

• 如果你的项目使用的是MUI v5版本，也可以直接在日期选择器组件上通过sx属性修改，不需要全局覆写类名：

  <DatePicker
    sx={{
      '& .MuiSvgIcon-root': { color: '#ffffff' }
    }}
    // 其余原有属性保持不变
  />
  

• 如果仅需要修改日历图标不影响其他输入框装饰器图标，可以使用更精准的类名.MuiDatePicker-icon进行匹配，避免样式污染其他组件。

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