如何使用React和Typescript获得最简单的材料UI选择？

npx create-react-app my-app --template typescript
cd my-app

npm install @mui/material @emotion/react @emotion/styled

import React from 'react';
import { Select, MenuItem } from '@mui/material';

interface MaterialUISelectProps {
  options: string[];
  value: string;
  onChange: (value: string) => void;
}

const MaterialUISelect: React.FC<MaterialUISelectProps> = ({ options, value, onChange }) => {
  return (
    <Select value={value} onChange={(e) => onChange(e.target.value as string)}>
      {options.map((option) => (
        <MenuItem key={option} value={option}>
          {option}
        </MenuItem>
      ))}
    </Select>
  );
};

export default MaterialUISelect;

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

const App: React.FC = () => {
  const [selectedOption, setSelectedOption] = useState('');

  const options = ['Option 1', 'Option 2', 'Option 3'];

  const handleOptionChange = (value: string) => {
    setSelectedOption(value);
  };

  return (
    <div>
      <h1>Material UI Select Example</h1>
      <MaterialUISelect options={options} value={selectedOption} onChange={handleOptionChange} />
      <p>Selected Option: {selectedOption}</p>
    </div>
  );
};

export default App;

npm start