首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

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

在Material-UI React中,要更改TextField日期选择器的日历图标的颜色,可以通过自定义样式来实现。

首先,需要导入所需的库和组件:

代码语言:txt
复制
import React from 'react';
import TextField from '@material-ui/core/TextField';
import { withStyles } from '@material-ui/core/styles';
import CalendarTodayIcon from '@material-ui/icons/CalendarToday';

然后,定义一个样式对象来修改日历图标的颜色:

代码语言:txt
复制
const styles = {
  icon: {
    color: 'red', // 设置图标颜色为红色
  },
};

接下来,创建一个自定义的TextField组件,并将样式应用于图标:

代码语言:txt
复制
const CustomTextField = withStyles(styles)(({ classes, ...props }) => (
  <TextField
    {...props}
    InputProps={{
      endAdornment: (
        <CalendarTodayIcon className={classes.icon} />
      ),
    }}
  />
));

最后,使用自定义的TextField组件来替代原始的TextField组件:

代码语言:txt
复制
function App() {
  return (
    <div>
      <CustomTextField
        label="选择日期"
        type="date"
        defaultValue="2022-01-01"
      />
    </div>
  );
}

这样,你就可以通过修改样式对象中的color属性来更改TextField日期选择器的日历图标的颜色了。

注意:以上示例中的样式对象styles中的color属性设置为红色仅作为示例,你可以根据自己的需求修改为任何颜色。

关于腾讯云相关产品和产品介绍链接地址,由于要求不能提及具体品牌商,建议你参考腾讯云官方文档或咨询腾讯云客服获取相关信息。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

领券