React-admin DateInput组件移动端显示异常求解决方案

针对你遇到的react-admin DateInput在iPhone真机上宽度被截断、Chrome模拟器正常、横竖屏切换后恢复的问题，这里有几个临时解决办法：

1. 强制设置组件容器宽度（最直接的CSS方案） #

iOS Safari可能在组件初始化时未正确计算容器宽度，直接给DateInput添加强制宽度样式即可：

方式一：全局样式覆盖 #

在项目的全局CSS文件中添加：

/* 适配iPhone竖屏的最小宽度，可根据需求调整 */
.fixed-date-input {
  width: 100%;
  min-width: 280px;
  box-sizing: border-box;
}

使用DateInput时指定className：

<DateInput source="passed_since" className="fixed-date-input" />

方式二：用styled-components封装组件 #

如果项目使用styled-components，可以直接封装一个修复后的组件：

import styled from 'styled-components';
import { DateInput } from 'react-admin';

const FixedDateInput = styled(DateInput)`
  width: 100%;
  min-width: 280px;
  box-sizing: border-box;
`;

// 替换原DateInput使用
<FixedDateInput source="passed_since" />

2. 手动触发重绘（模拟横竖屏切换的效果） #

横竖屏切换后恢复是因为浏览器触发了重绘，我们可以在组件挂载后手动触发一次resize事件，强制浏览器重新计算尺寸：

import { DateInput } from 'react-admin';
import { useEffect, useRef } from 'react';

const FixedDateInput = ({ ...props }) => {
  const inputRef = useRef(null);

  useEffect(() => {
    // 组件挂载后触发窗口resize事件
    window.dispatchEvent(new Event('resize'));
  }, []);

  return <DateInput ref={inputRef} {...props} />;
};

// 使用这个封装后的组件
<FixedDateInput source="passed_since" />

3. 强制内部输入框宽度100% #

如果容器宽度设置无效，可能是内部的原生input元素未继承宽度，直接给内部input设置样式：

/* 全局样式 */
.ra-date-input input {
  width: 100% !important;
  box-sizing: border-box;
}

注意：!important仅作为临时修复使用，官方修复后建议移除。

以上方案都是临时过渡用，建议同时在react-admin的官方仓库提交问题，跟进官方修复进度。

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