在 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 的更多資訊，請檢視官方文件。