如何修改MUI TextField的文本颜色？React新手求助

问题原因 #

你写的inputProps={{sx: { color: "#CCCCCC" }}}无效，核心原因是：

• MUI的inputProps是直接传递给底层原生<input>元素的属性，而sx是MUI组件专属的样式API，原生<input>不识别sx语法。
• 标签（InputLabelProps）和图标用sx有效，是因为它们本身就是MUI组件，能正常解析sx样式配置。

两种可行解决方案 #

方案1：通过InputProps.sx控制输入文本颜色（推荐）

直接在InputProps中添加sx配置，统一控制输入框内的文本样式：

return ( 
  <div className="navbar">
    <form onSubmit={requestData}>
      <TextField
        fullWidth
        id="fullWidth"
        label="Enter a fragrance name!"
        InputLabelProps={{ sx: { color: "#CCCCCC" }}}
        InputProps={{
          sx: { color: "#CCCCCC" }, // 控制输入文本颜色
          endAdornment: (
            <InputAdornment position="end">
              <IconButton onClick={requestData}>
                <SearchIcon sx={{color: "#CCCCCC"}}/>
              </IconButton>
            </InputAdornment>
          )
        }}
        onChange={(e) => setSearch(e.target.value)}
      />
    </form>
  </div>
)

方案2：给原生<input>传递style属性

如果想通过inputProps设置样式，需要使用原生DOM的style属性而非MUI的sx：

return ( 
  <div className="navbar">
    <form onSubmit={requestData}>
      <TextField
        fullWidth
        id="fullWidth"
        label="Enter a fragrance name!"
        InputLabelProps={{ sx: { color: "#CCCCCC" }}}
        inputProps={{ style: { color: "#CCCCCC" }}} // 用原生style属性设置颜色
        InputProps={{
          endAdornment: (
            <InputAdornment position="end">
              <IconButton onClick={requestData}>
                <SearchIcon sx={{color: "#CCCCCC"}}/>
              </IconButton>
            </InputAdornment>
          )
        }}
        onChange={(e) => setSearch(e.target.value)}
      />
    </form>
  </div>
)

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