如何使用Material-ui更改输入焦点上的TexField变体并保持焦点

import React, { useRef } from 'react';
import { TextField, Button } from '@material-ui/core';
import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles((theme) => ({
  focusedInput: {
    // 自定义输入框获取焦点时的样式
    borderColor: theme.palette.primary.main,
    boxShadow: `0 0 0 2px ${theme.palette.primary.main}`,
  },
}));

const MyComponent = () => {
  const classes = useStyles();
  const inputRef = useRef(null);

  const handleButtonClick = () => {
    // 点击按钮时，将焦点设置到输入框上
    inputRef.current.focus();
  };

  return (
    <div>
      <TextField
        inputRef={inputRef}
        variant="outlined"
        label="输入框"
        // 添加自定义样式类名
        className={classes.focusedInput}
      />
      <Button onClick={handleButtonClick}>设置焦点</Button>
    </div>
  );
};