如何通过style={}修改MUI TextField组件的边框颜色为白色？

可以直接通过组件的style属性实现，但得找对控制边框的目标元素——outlined变体的TextField边框是由内部OutlinedInput组件的notchedOutline元素控制的，你当前代码里在InputLabelProps中设置borderColor是无效的，因为标签本身没有边框。

直接用style属性实现的修改方案 #

你需要通过InputProps（注意和inputProps区分：前者是给MUI Input组件的属性，后者是给原生input元素的）传递嵌套CSS选择器，覆盖边框样式：

<TextField
  label="Search login"
  variant="outlined"
  value={searchLogin}
  inputProps={{
    style: {
      color: "white",
    },
  }}
  InputLabelProps={{
    style: {
      color: "white",
    },
  }}
  InputProps={{
    style: {
      '& .MuiOutlinedInput-notchedOutline': {
        borderColor: 'white',
      },
      '&:hover .MuiOutlinedInput-notchedOutline': {
        borderColor: 'white', // 鼠标悬停时保持白色边框
      },
      '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
        borderColor: 'white', // 获取焦点时保持白色边框
      }
    }
  }}
  onChange={(e) => {
    setSearchLogin(e.target.value);
  }}
/>

用makeStyles实现的方案 #

如果需要样式复用或者更复杂的样式管理，也可以用makeStyles：

import { makeStyles } from '@mui/styles';

const useStyles = makeStyles({
  outlinedInput: {
    '& .MuiOutlinedInput-notchedOutline': {
      borderColor: 'white',
    },
    '&:hover .MuiOutlinedInput-notchedOutline': {
      borderColor: 'white',
    },
    '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
      borderColor: 'white',
    },
    color: 'white',
  },
  inputLabel: {
    color: 'white',
  }
});

// 在组件内使用
const classes = useStyles();

<TextField
  label="Search login"
  variant="outlined"
  value={searchLogin}
  InputProps={{ className: classes.outlinedInput }}
  InputLabelProps={{ className: classes.inputLabel }}
  onChange={(e) => {
    setSearchLogin(e.target.value);
  }}
/>

两种方法都可行，直接用style属性更快捷，适合单组件样式修改；makeStyles更适合样式需要复用的场景。

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