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

在 React 应用中使用 Material-UI 显示只读列表是一个常见的需求。Material-UI 提供了丰富的组件库，可以帮助你快速构建美观且功能强大的用户界面。以下是一个示例，展示如何使用 Material-UI 显示一个只读列表。

安装 Material-UI

首先，确保你已经安装了 Material-UI。如果还没有安装，可以使用以下命令：

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

创建只读列表组件

接下来，我们将创建一个只读列表组件。我们将使用 Material-UI 的 List 和 ListItem 组件来实现这一功能。

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;

解释

导入组件：
- 我们从 @mui/material 中导入了 List、ListItem、ListItemText 和 Typography 组件。
创建 ReadOnlyList 组件：
- ReadOnlyList 组件接收一个 items 属性，该属性是一个包含列表项的数组。
- 使用 List 组件包裹整个列表。
- 使用 ListItem 和 ListItemText 组件来显示每个列表项的主要和次要文本。
创建 App 组件：
- App 组件定义了一个包含列表项的数组 items。
- 使用 Typography 组件显示标题。
- 渲染 ReadOnlyList 组件，并将 items 作为属性传递给它。

运行应用

确保你的 React 应用已经正确配置，并且你已经安装了 Material-UI。然后运行你的应用，你应该会看到一个只读列表，显示了每个列表项的主要和次要文本。

自定义样式

你可以使用 Material-UI 的 sx 属性或 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';
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;

在这个示例中，我们使用 styled 函数创建了一个自定义的 CustomListItem 组件，并应用了一些样式。

通过这种方式，你可以使用 Material-UI 轻松创建和自定义只读列表。