React MUI TextField有值时保持蓝色边框的实现方法求助

要实现你需要的边框颜色逻辑，我们可以通过Material-UI的内联样式（sx）结合输入值和聚焦状态来控制边框颜色，具体步骤如下：

1. 添加聚焦状态跟踪：用于判断输入框是否被点击激活
2. 自定义InputProps的样式：根据输入值是否存在、是否聚焦来动态设置边框颜色

修改后的完整代码：

import { useState } from 'react';
import { Stack, TextField } from '@mui/material';
import CloseButton from './CloseButton'; // 确保你的CloseButton路径正确

export default function Search({ table }) {
  const [input, setInput] = useState(filters.search[table]);
  const [isFocused, setIsFocused] = useState(false);

  return (
    <Stack>
      <TextField
        value={input}
        onFocus={() => setIsFocused(true)}
        onBlur={() => setIsFocused(false)}
        InputProps={{
          endAdornment: (<CloseButton onClick={() => setInput("")} />),
          sx: {
            // 默认/失焦无值时的边框颜色
            '& .MuiOutlinedInput-notchedOutline': {
              borderColor: input.length > 0 || isFocused ? 'blue' : 'black',
            },
            // hover状态下的边框颜色
            '&:hover .MuiOutlinedInput-notchedOutline': {
              borderColor: input.length > 0 || isFocused ? 'blue' : 'black',
            },
            // 聚焦时的边框颜色
            '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
              borderColor: 'blue',
            },
          },
        }}
        onChange={(e) => { setInput(e.target.value); }}
      />
    </Stack>
  );
}

逻辑说明： #

• 默认状态（无值且未聚焦）：边框为黑色
• 聚焦状态（无论有无值）：边框变为蓝色
• 失焦但有值：边框保持蓝色
• 失焦且无值：边框变回黑色

如果你的TextField使用的是filled或standard变体，只需要调整样式选择器（比如针对.MuiFilledInput-root或.MuiInput-root）即可，核心逻辑保持一致。

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