如何使用material-ui显示只读列表？

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

import React from 'react';
import List from '@mui/material/List';
import ListItem from '@mui/material/ListItem';
import ListItemText from '@mui/material/ListItemText';
import Typography from '@mui/material/Typography';

const ReadOnlyList = ({ items }) => {
  return (
    <List>
      {items.map((item, index) => (
        <ListItem key={index}>
          <ListItemText
            primary={item.primary}
            secondary={item.secondary}
          />
        </ListItem>
      ))}
    </List>
  );
};

const App = () => {
  const items = [
    { primary: 'Item 1', secondary: 'Description 1' },
    { primary: 'Item 2', secondary: 'Description 2' },
    { primary: 'Item 3', secondary: 'Description 3' },
  ];

  return (
    <div>
      <Typography variant="h4" gutterBottom>
        Read-Only List
      </Typography>
      <ReadOnlyList items={items} />
    </div>
  );
};

export default App;

import React from 'react';
import List from '@mui/material/List';
import ListItem from '@mui/material/ListItem';
import ListItemText from '@mui/material/ListItemText';
import Typography from '@mui/material/Typography';
import { styled } from '@mui/system';

const CustomListItem = styled(ListItem)(({ theme }) => ({
  backgroundColor: theme.palette.background.paper,
  margin: theme.spacing(1),
  borderRadius: theme.shape.borderRadius,
}));

const ReadOnlyList = ({ items }) => {
  return (
    <List>
      {items.map((item, index) => (
        <CustomListItem key={index}>
          <ListItemText
            primary={item.primary}
            secondary={item.secondary}
          />
        </CustomListItem>
      ))}
    </List>
  );
};

const App = () => {
  const items = [
    { primary: 'Item 1', secondary: 'Description 1' },
    { primary: 'Item 2', secondary: 'Description 2' },
    { primary: 'Item 3', secondary: 'Description 3' },
  ];

  return (
    <div>
      <Typography variant="h4" gutterBottom>
        Read-Only List
      </Typography>
      <ReadOnlyList items={items} />
    </div>
  );
};

export default App;