在 React 中使用 MUI 图标

1. 使用 Material UI 库中的图标
2. 在 React 中如何使用 Material Design 图标
3. 在 React 中使用带有 IconButton 组件的 MUI 图标
4. 在 React 中使用带有 Button 组件的 MUI 图标

React 是一个用于构建 UI（用户界面）的库。它使你可以自由地创建具有自定义视觉效果和功能的元素。

通常，React 应用程序是用 JSX 编写的，这是一种类似于 HTML 的模板语言。React 开发人员也可以使用 CSS 来设置组件的样式。

然而，有时为一个简单的组件设置样式可能需要很长时间。这就是为什么像 Material UI 这样的 React 组件库是有用的。

这个特定的库包含现成的组件，无需手动设置样式即可导入和使用。React 开发人员可以使用 Material UI 库中的组件来节省时间。

使用 Material UI 库中的图标

无论你正在构建什么类型的应用程序，你都需要按钮。MUI 为你提供了许多自定义功能和按钮视觉效果的可能性。

UI 库包含十几个不同种类的不同图标。当然，你可以找到几乎所有用途的图标并将其与按钮一起使用。

在 React 中如何使用 Material Design 图标

要在 React 中使用 2000 多个 Material Design 图标中的一个，首先，从这个目录中选择一个。你可以在以下五种图标类型中进行选择：填充、轮廓、圆形、双色调和锐利。

好消息是所有图标都是免费的，不像其他类似的图标库。

让我们看一个例子。在这里，我们导入了一个相机图标。

import CameraAltIcon from "@mui/icons-material/CameraAlt";
export default function App() {
  return (
    <div className="App">
      <h1>
        Camera <CameraAltIcon></CameraAltIcon>
      </h1>
    </div>
  );
}

在此示例中，我们在标题文本中显示一个图标。React 开发人员可以自定义每个 Material Design 图标的大小和颜色。

我们可以使用 fontSize 和 color props。让我们看一下这个例子。

export default function App() {
  return (
    <div className="App">
      <h1>
        Camera <CameraAltIcon color="primary" fontSize="large"></CameraAltIcon>
      </h1>
    </div>
  );
}

你可以在 codesandbox 上看到图标的外观。你可以更改 props 的值。

你可以查看官方文档网站上的 Icon API 页面以了解有关自定义可能性的更多信息。

然而，图标在按钮内部使用时更有用。幸运的是，Material UI 组件也支持这一点。

在 React 中使用带有 IconButton 组件的 MUI 图标

@mui/material 包中的自定义 IconButton 组件允许我们将任何 Material Design 图标转换为按钮。你必须像此示例一样使用 IconButton 组件包装图标。

import CameraAltIcon from "@mui/icons-material/CameraAlt";
import { IconButton, Button } from "@mui/material";
export default function App() {
  return (
    <div className="App">
      <h1>
        Camera <CameraAltIcon color="primary" fontSize="large"></CameraAltIcon>
        <br/>
        <IconButton>
          <CameraAltIcon/>
        </IconButton>
      </h1>
    </div>
  );
}

在这里，我们将 <CameraAltIcon> 变成了一个按钮。请注意，在这种情况下，我们没有为图标使用 color、fontSize 和其他 props，但我们可以。

你可以在 codesandbox 演示中查看图标按钮的外观。你还可以在 <IconButton> 组件本身上设置 size、color、disabled 和其他属性。

要了解更多信息，请查看官方 API 文档。

在 React 中使用带有 Button 组件的 MUI 图标

基本的 Button 组件对于显示带有文本的图标很有用。除了常见的属性，如 color 和 size，<Button> 组件的 API 还包括 startIcon 和 endIcon 属性​​。

这些允许 React 开发人员分别将某些图标放在按钮的开头或结尾。看看下面的实际代码。

<Button startIcon={<CameraAltIcon />} variant="outlined">
          Take a Picture
</Button>

在这种情况下，按钮将在 Button 组件的开始标签和结束标签之间有一个文本，并且指定的图标将出现在文本之前。请参阅 codesandbox 上的演示。

Material UI 为你提供了很多自定义按钮的自由。单个或小型开发团队几乎不可能自己完成所有这些工作。

有关此组件 API 的更多信息，请查看官方文档。