如何使用date-fns修改material-ui-pickers时间选择器时区？

material-ui-pickers的所有日期处理逻辑都依赖外层注入的date adapter工具类，默认提供的DateFnsUtils不支持自定义时区，我们可以通过继承扩展该类，结合date-fns-tz的时区处理能力快速实现需求，不需要修改时间选择器组件本身的代码。

• 第一步：安装必要依赖

# npm 安装
npm i @date-io/date-fns date-fns date-fns-tz

# yarn 安装
yarn add @date-io/date-fns date-fns date-fns-tz

• 第二步：编写支持时区的扩展工具类
  新建工具文件，写入以下代码，继承原生DateFnsUtils，覆写format方法注入时区参数：

import { format } from 'date-fns-tz';
import DateFnsUtils from "@date-io/date-fns";

export default class DateFnsTzUtils extends DateFnsUtils {
  constructor(props) {
    super();
    this.timeZone = props.timeZone;
  }

  format(date, formatString) {
    return format(date, formatString, {
      timeZone: this.timeZone,
      locale: this.locale
    });
  }
}

• 第三步：全局/局部注入自定义工具类
  在使用时间选择器的组件外层，用MuiPickersUtilsProvider包裹，替换默认的utils为我们刚写的DateFnsTzUtils，同时传入需要指定的IANA标准时区字符串即可：

import { useState } from 'react';
import { MuiPickersUtilsProvider, TimePicker } from '@material-ui/pickers';
import DateFnsTzUtils from './utils/DateFnsTzUtils';

export default function TimeSelector() {
  const [selectTime, setSelectTime] = useState(new Date());
  return (
    // 示例为东八区配置，需要其他时区替换timeZone值即可，例如纽约时区传"America/New_York"
    <MuiPickersUtilsProvider utils={DateFnsTzUtils} timeZone="Asia/Shanghai">
      <TimePicker
        label="选择时间"
        value={selectTime}
        onChange={setSelectTime}
      />
    </MuiPickersUtilsProvider>
  )
}

提示：不要传入固定的时区偏移值（例如+8）作为timeZone参数，必须使用IANA标准时区名称，否则夏令时切换时会出现时间计算错误。

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