如何更改 React Material-UI TextField 的焦点颜色

Question

我正在使用 Material-UI React 库，我需要在点击或聚焦时更改 TextField 的边框颜色（视情况而定）。

这是我尝试过的：

const useFormFieldStyles = makeStyles((theme) => ({
  input: {
    borderWidth: '1px',
    fontWeight: 'bold',
    '& .MuiOutlinedInput-input:focused': {
      borderColor: 'green',
    }
  }
}));

然而，尽管我付出了很多努力，borderColor 仍然是蓝色的。

我怎样才能做到这一点？

Answer 1

参见 Customized inputs 部分。下面的示例为 TextField 的聚焦颜色边框和标签设置了 3 种变体的样式：

const focusedColor = "orange";
const useStyles = makeStyles({
  root: {
    // input label when focused
    "& label.Mui-focused": {
      color: focusedColor
    },
    // focused color for input with variant='standard'
    "& .MuiInput-underline:after": {
      borderBottomColor: focusedColor
    },
    // focused color for input with variant='filled'
    "& .MuiFilledInput-underline:after": {
      borderBottomColor: focusedColor
    },
    // focused color for input with variant='outlined'
    "& .MuiOutlinedInput-root": {
      "&.Mui-focused fieldset": {
        borderColor: focusedColor
      }
    }
  }
});

export default function CustomizedInputs() {
  const classes = useStyles();

  return (
    <div style={{ display: "flex", columnGap: 15 }}>
      <TextField className={classes.root} variant="outlined" />
      <TextField className={classes.root} variant="standard" />
      <TextField className={classes.root} variant="filled" />
    </div>
  );
}

现场演示