React自定义Input组件添加CSS时margin位置错误的解决方法

你当前的实现是把所有传入组件的 props（包括style）直接透传给了内部的<input>标签，导致margin-bottom会作用在输入框本身，自然会让输入框和错误提示之间产生间距，而不是整个组件容器的底部。

下面提供两种兼容你需求的实现方式，都能保留<input>上的...rest透传，同时让容器样式生效：

方案一：拆分容器与输入框属性（推荐，更灵活） #

通过新增containerProps参数来专门接收外层容器的属性，剩下的所有属性依然透传给输入框，彻底避免属性冲突：

import { InputHTMLAttributes, HTMLAttributes } from 'react';

// 定义组件的props类型（TypeScript）
type InputProps = {
  name: string;
  errors?: boolean;
  // 用于传递外层div的所有属性
  containerProps?: HTMLAttributes<HTMLDivElement>;
} & InputHTMLAttributes<HTMLInputElement>;

const Input = ({ name, errors, containerProps, ...rest }: InputProps) => {
  return (
    <div {...containerProps}>
      <input type="text" name={name} {...rest} />
      {errors && <span>Error: Please add your name</span>}
    </div>
  );
};

使用示例 #

<Input
  name="fullname"
  // 给整个组件容器设置底部margin
  containerProps={{ style: { marginBottom: 45 }, className: 'input-wrapper' }}
  // 这些属性会直接透传给内部的<input>
  required
  id="fullname-input"
  className="form-input"
  placeholder="Enter your name"
/>

方案二：直接提取容器样式（贴近原有写法） #

如果不想新增参数，可以直接从传入的props中提取style、className这类容器属性，剩下的透传给输入框；如果需要给输入框单独设置样式，额外新增inputStyle、inputClassName参数即可：

const Input = ({ name, style, className, inputStyle, inputClassName, errors, ...rest }) => {
  return (
    <div style={style} className={className}>
      <input
        type="text"
        name={name}
        style={inputStyle}
        className={inputClassName}
        {...rest}
      />
      {errors && <span>Error: Please add your name</span>}
    </div>
  );
};

使用示例 #

<Input
  name="fullname"
  // 容器样式：作用在整个组件底部
  style={{ marginBottom: 45 }}
  className="input-wrapper"
  // 输入框单独的样式
  inputStyle={{ borderColor: '#ccc' }}
  inputClassName="form-input"
  required
  placeholder="Enter your name"
/>

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