为何styled()无法为MUI <TextField />组件设置样式？

核心原因：TextField是复合组件，styled直接设置的样式没作用到正确元素 #

MUI的TextField不是单个DOM元素，而是由FormControl、InputLabel、OutlinedInput（或其他输入组件）等多个内部组件组合而成的复合组件。你直接用styled(TextField)设置borderRadius和width，这些样式会被应用到最外层的FormControl上，但：

• width：输入框的实际宽度由内部的输入组件（比如OutlinedInput）控制，设置在FormControl上的宽度无法正确传递到内部元素；
• borderRadius：输入框的圆角是内部输入组件的边框容器（比如OutlinedInput的notchedOutline元素）负责渲染的，和最外层FormControl无关，所以直接设置borderRadius完全碰不到目标元素。

第一种写法生效的逻辑 #

• InputProps={{ style: { borderRadius: '.4rem' } }}：InputProps是MUI专门提供的、用来向内部输入组件传递属性的API，这里的style会直接作用到OutlinedInput（或对应输入组件）上，精准命中控制圆角的元素；
• sx={{ width: '15rem' }}：sx属性是MUI的优先样式方案，它的权重高于普通styled样式，并且会正确作用到组件的根元素，同时能通过MUI的样式继承机制，确保宽度设置覆盖内部组件的默认样式。

让styled写法生效的正确方式 #

如果想用styled实现相同效果，需要通过类选择器定位到TextField内部的具体组件：

const StyledTextField = styled(TextField)({
  width: '15rem',
  // 针对OutlinedInput组件设置圆角
  '& .MuiOutlinedInput-root': {
    borderRadius: '.4rem',
  },
});

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