Material-UI TextField的underlineStyle属性未被React识别问题求助

嘿，我来帮你搞定这个报错！你遇到的React警告，本质是因为underlineStyle并不是TextField组件直接接受的属性——Material-UI的TextField是个封装好的高阶组件，它的底层依赖Input组件来处理输入框的下划线样式，所以不能直接把样式属性丢给TextField本身。

下面分两种常用版本给你解决方案：

方案1：Material-UI v1/v4 版本 #

直接把下划线样式通过InputProps传递给内部的Input组件，这样React就不会识别为无效属性了：

import TextField from '@material-ui/core/TextField';
import { orange } from '@material-ui/core/colors';

<TextField
  type="number"
  id="Commission"
  label="Commission"
  fullWidth
  InputProps={{
    underlineStyle: {
      borderColor: orange[500]
    }
  }}
/>

方案2：Material-UI v5 版本（更推荐） #

v5版本更倾向于用sx属性或者自定义主题来定制样式，你可以直接通过CSS选择器定位到下划线元素：

import TextField from '@mui/material/TextField';
import { orange } from '@mui/material/colors';

<TextField
  type="number"
  id="Commission"
  label="Commission"
  fullWidth
  sx={{
    // 默认状态下划线
    '& .MuiInput-underline:before': {
      borderColor: orange[500]
    },
    // hover状态下划线
    '& .MuiInput-underline:hover:not(.Mui-disabled):before': {
      borderColor: orange[700]
    },
    // 聚焦状态下划线
    '& .MuiInput-underline:after': {
      borderColor: orange[900]
    }
  }}
/>

简单总结下：之所以会出现警告，是因为你把本该传给子组件的样式属性直接给了父级TextField，React会严格校验组件的props列表，所以只要把样式通过InputProps（v1/v4）或者sx（v5）传递给正确的目标组件，问题就解决啦～

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