Material-UI，单选按钮+贴图功能( React JS)

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

yarn add @mui/material @emotion/react @emotion/styled

import React, { useState } from 'react';
import { Radio, Avatar, FormControlLabel, Typography } from '@mui/material';

const ImageRadioButton = ({ options }) => {
  const [value, setValue] = useState(options[0].value);

  const handleChange = (event) => {
    setValue(event.target.value);
  };

  return (
    <div>
      {options.map((option, index) => (
        <FormControlLabel
          key={index}
          value={option.value}
          control={
            <Radio
              checked={value === option.value}
              onChange={handleChange}
              color="primary"
            />
          }
          label={
            <div style={{ display: 'flex', alignItems: 'center' }}>
              <Avatar src={option.image} alt={option.label} sx={{ marginRight: 1 }} />
              <Typography variant="body1">{option.label}</Typography>
            </div>
          }
        />
      ))}
    </div>
  );
};

export default ImageRadioButton;

import React from 'react';
import ImageRadioButton from './ImageRadioButton';

const App = () => {
  const options = [
    { value: 'apple', label: 'Apple', image: 'path/to/apple.png' },
    { value: 'banana', label: 'Banana', image: 'path/to/banana.png' },
    { value: 'cherry', label: 'Cherry', image: 'path/to/cherry.png' },
  ];

  return (
    <div>
      <Typography variant="h4">Choose a fruit:</Typography>
      <ImageRadioButton options={options} />
    </div>
  );
};

export default App;