React+Material UI：如何强制Styled Components自定义Input始终用size='small'

你可以通过两种简单方式实现需求，核心思路是强制覆盖用户传入的size属性，确保最终传递给Material UI TextField的size始终为small：

方法1：包装组件（最直观易维护） #

先创建带自定义样式的基础TextField，再用一个包装组件统一处理props，强制设置size="small"：

import * as React from "react";
import TextField, { TextFieldProps } from "@mui/material/TextField";
import { styled } from "@mui/material/styles";

// 定义带自定义样式的StyledTextField
const StyledTextField = styled(TextField)<TextFieldProps>(
  ({ disabled, multiline, theme }) => ({
    border: `1px solid red`
  })
);

// 包装成最终的Input组件，强制覆盖size属性
const Input = (props: TextFieldProps) => {
  // 展开用户传入的所有props，再用size="small"覆盖可能存在的size值
  return <StyledTextField {...props} size="small" />;
};

export default Input;

使用时不管你写<Input label="Outlined" />还是<Input label="Outlined" size="large" />，组件都会自动使用size="small"。

方法2：在styled组件中设置默认props #

也可以直接在styled组件的配置中指定默认props，强制size为small：

import * as React from "react";
import TextField, { TextFieldProps } from "@mui/material/TextField";
import { styled } from "@mui/material/styles";

const Input = styled(TextField)<TextFieldProps>(
  ({ disabled, multiline, theme }) => ({
    border: `1px solid red`
  })
)({
  defaultProps: {
    size: "small"
  } as TextFieldProps
});

export default Input;

这种方式更简洁，适合样式和props约束都比较简单的场景。

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