在悬停时更改Material UI TextField的边框颜色

import React, { useState } from 'react';
import { TextField } from '@material-ui/core';

const CustomTextField = () => {
  const [isHovered, setIsHovered] = useState(false);

  const handleMouseEnter = () => {
    setIsHovered(true);
  };

  const handleMouseLeave = () => {
    setIsHovered(false);
  };

  return (
    <TextField
      label="Input"
      variant="outlined"
      onMouseEnter={handleMouseEnter}
      onMouseLeave={handleMouseLeave}
      style={{ borderColor: isHovered ? 'red' : 'initial' }}
    />
  );
};

import React from 'react';
import ReactDOM from 'react-dom';
import CustomTextField from './CustomTextField';

ReactDOM.render(
  <React.StrictMode>
    <CustomTextField />
  </React.StrictMode>,
  document.getElementById('root')
);