React中如何为Input组件添加样式并解决disabled样式不生效问题？

代码存在两个核心错误，导致disabled状态始终异常：

• 函数组件参数接收语法错误：React函数组件仅接收一个props对象作为入参，原代码写为(disabled, props)，相当于把整个props对象赋值给了disabled变量，第二个参数props实际为undefined。对象属于truthy值，因此传入Input组件的disabled永远为真，背景色始终为灰色。
• JSX属性传递顺序错误：原代码先写disabled={disabled}再展开{...props}，后续展开的外部传入属性会直接覆盖前面手动赋值的disabled，就算参数写法正确，状态也会被覆盖。

按照React标准props传递规则调整代码即可，修复后的组件实现如下：

import React, { InputHTMLAttributes } from "react";
import styled, { css } from "styled-components";

// 样式组件直接继承原生input属性类型，无需重复定义
const Input = styled.input<InputHTMLAttributes<HTMLInputElement>>`
  ${({ disabled }) => css`
    background-color: ${disabled ? "gray" : "white"};
  `}
`;

export const MyInput: React.FC<InputHTMLAttributes<HTMLInputElement>> = (
  props
) => {
  // 先展开外部传入的所有props，最后追加固定属性type="text"，避免固定属性被外部覆盖
  return <Input {...props} type="text" />;
};

使用侧代码无需任何修改，即可实现disabled状态切换时背景色动态变化。

• 若需要在组件内解构单个props属性，必须使用对象解构语法，写法为({ disabled, ...restProps }) => {}，禁止将单个属性作为独立入参传递。
• JSX属性优先级规则为：同名属性后写的覆盖先写的。如果需要固定某个属性值（如本例固定type为text），必须将该属性放在{...props}之后；如果需要允许外部传入属性覆盖默认值，则将默认属性放在展开操作之前。
• styled-components会自动透传合法的原生DOM属性到真实DOM节点，同时样式插值函数中可以直接读取这些属性值做动态样式判断，无需额外手动传递。

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