如何在React JS中更改错误警报的位置

import React from 'react';

const ErrorAlert = ({ message }) => {
  return (
    <div className="error-alert">
      {message}
    </div>
  );
};

export default ErrorAlert;

import React, { useState } from 'react';
import ErrorAlert from './ErrorAlert';

const MyComponent = () => {
  const [error, setError] = useState('');

  const handleButtonClick = () => {
    // 模拟一个错误
    setError('发生了一个错误！');
  };

  return (
    <div>
      <button onClick={handleButtonClick}>触发错误</button>
      {error && <ErrorAlert message={error} />}
    </div>
  );
};

export default MyComponent;

.error-alert {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: red;
  color: white;
  padding: 10px;
}