如何在 Material UI 中使用 Button 元件？

---

按鈕用於執行某些操作，例如表單提交、檔案上傳、連結點選、網頁路由等。Material UI 提供了預先樣式化的按鈕元件，使用者可以將其匯入 React 應用程式並在 React 元件內部使用。

Material UI 中提供了不同型別的按鈕，使用者可以根據自己的需求使用任何一種。

在終端中執行以下命令以安裝 Material UI 庫。

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

語法

使用者應遵循以下語法來使用 Material UI 庫的 Button 元件。

<Button> Click </Button>

示例 1（基本按鈕）

在下面的示例中，我們使用了 Material UI 庫的 Button 元件在 App 元件中新增按鈕。第一個按鈕只會顯示文字，因為我們使用了“text”變體。第二個按鈕是預設按鈕。第三個按鈕是“contained”變體，表示填充按鈕。最後一個按鈕被停用，因為我們已將“disabled”屬性作為 prop 傳遞。

import React from "react";
import Button from "@mui/material/Button";

function App() {
   return (
      <div>
         <Button variant = "text"> Content </Button>
         <Button> Click </Button>
         <Button variant = "contained"> Filled button </Button>
         <Button disabled> Can't click </Button>
      </div>
   );
}

export default App;

輸出

示例 2（向按鈕新增顏色和連結）

在下面的示例中，我們將學習如何更改 Material UI 的 Button 元件的顏色。使用者可以看到，他們可以將“primary”、“secondary”或“error”作為 color prop 的值來應用標準顏色。此外，使用者應使用 style 屬性來應用自定義顏色。

此外，我們添加了“href”作為 Button 元件的 prop。我們需要將網頁連結作為“href”prop 的值傳遞，以使按鈕充當連結。

import React from "react";
import Button from "@mui/material/Button";

function App() {
   return (
      <div>
         <Button variant = "outlined" color = "primary">
            {" "}
            Content {" "}
         </Button>
         <br></br>
         <Button variant = "outlined" color = "error">
            {" "}
            Click {" "}
         </Button>
         <br></br>
         <Button variant = "contained" href = "#">
            {" "}
            Link button {" "}
         </Button>
         <br></br>
      </div>
   );
}
export default App;

輸出

示例 3（向按鈕新增圖示）

當我們在按鈕中新增圖示時，它看起來比沒有圖示的按鈕好得多。在下面的示例中，我們已向按鈕添加了圖示。在第一個按鈕中，我們在開頭添加了複製圖示，在第二個按鈕中，我們在結尾添加了貼上圖示。

此外，我們已從 Material UI 庫中匯入了圖示，但使用者可以建立自定義元件來使用自定義圖示。

import React from "react";
import Button from "@mui/material/Button";
import ContentCopyIcon from "@mui/icons-material/ContentCopy";
import ContentPasteIcon from "@mui/icons-material/ContentPaste";

function App() {
   return (
      <div>
         <h2>
            Using the <i> Button Component </i> of Material Ui with icons to add
            buttons in the React applications. {" "}
         </h2>
         <Button
            Variant = "contained"
            startIcon = {<ContentCopyIcon />}
            color = "secondary"
            >
            Copy
         </Button>
         <br></br> <br></br>
         <Button variant = "contained" endIcon = {<ContentPasteIcon />}>
            Paste
         </Button>
      </div>
   );
}

export default App;

輸出

示例 4（向按鈕新增點選事件）

按鈕主要用於在點選時執行某些操作。在這裡，我們添加了“onClick”事件來檢測按鈕的點選。每當使用者點選按鈕時，它都會呼叫 handleClick() 函式。在 handleClick() 函式中，我們設定訊息值，例如按鈕被點選，使用者可以在輸出中觀察到。

import React from "react";
import Button from "@mui/material/Button";

function App() {
   let [message, setMessage] = React.useState("");

   function handleClick() {
      setMessage("You clicked the button!");
   }

   return (
      <div>
         <Button variant = "contained" onClick = {handleClick} color = "secondary">
            Click me
         </Button>
         <br></br>
         {message}
      </div>
   );
}

export default App;

輸出

使用者學習瞭如何使用 Material UI 的按鈕元件。在第一個示例中，我們學習瞭如何使用 Button 元件的不同變體。在第二個示例中，我們學習瞭如何向按鈕新增顏色並使其像連結一樣。在第三個示例中，我們在最後一個示例中向按鈕添加了圖示和點選事件。