深夜福利四区,AV综合一

在本文中，我們將學(xué)習(xí)如何在 Material UI 中自定義芯片。芯片是代表輸入、屬性或操作的小組件。借助芯片，用戶可以輸入數(shù)據(jù)、選擇選項(xiàng)、過濾內(nèi)容或啟動(dòng)流程。

該芯片也可以在 React 的 MUI 中定制。芯片的定制可能包括更改芯片顏色、自定義刪除圖標(biāo)、添加頭像或使用其根屬性創(chuàng)建芯片。我們將在本文中看到所有內(nèi)容。

要在 MUI 中使用芯片，我們需要了解它們的 API 及其相關(guān)道具。

芯片 API

Chip API 用于向 React MUI 添加芯片。它帶有道具

avatar - 為了在芯片上顯示頭像，我們使用 avatar 屬性。
classes - 為了自定義組件的樣式，我們可以利用 classes 屬性。
color ? 如果要個(gè)性化芯片顏色，可以使用 color 屬性來實(shí)現(xiàn)。
component - component屬性在芯片中呈現(xiàn)根組件。
可點(diǎn)擊 - 通過使用這個(gè)屬性，我們可以使芯片可點(diǎn)擊。按下時(shí)將其抬起。
deleteIcon - 如果要更改芯片組件中的圖標(biāo)，可以使用deleteIcon進(jìn)行修改。
禁用 - 要禁用芯片，只需使用 disabled。
圖標(biāo) - 您可以選擇利用 icon 屬性將圖標(biāo)添加到芯片。
label ? label 屬性用于向組件添加內(nèi)容。
onDelete ? 為了顯示刪除圖標(biāo)，我們使用 onDelete 屬性。
尺寸 - 要調(diào)整芯片的大小，請(qǐng)使用此尺寸道具。
skipFocusWhenDisabled ? 要跳過對(duì)芯片的關(guān)注，請(qǐng)相應(yīng)地使用 prop。
sx ? 要為芯片組件添加自定義樣式，請(qǐng)使用 thesx 屬性。
變體 - 如果您想要不同的芯片變體，請(qǐng)使用 prop。

定制芯片所需的步驟

要在Material UI中制作自定義芯片組件，請(qǐng)參閱給定的步驟

第 1 步：創(chuàng)建 react 應(yīng)用程序

在繼續(xù)在 MUI 中自定義芯片組件之前，我們需要?jiǎng)?chuàng)建一個(gè) react 應(yīng)用程序。要?jiǎng)?chuàng)建新的 React 應(yīng)用程序，請(qǐng)?jiān)诮K端中運(yùn)行以下命令

npx create react app chipcompproject

創(chuàng)建項(xiàng)目后，通過運(yùn)行 ? 導(dǎo)航到其目錄

cd chipcompproject

第 2 步：將 MUI 添加到 React

創(chuàng)建 react 應(yīng)用程序后，就可以將 Material UI 安裝到 react 應(yīng)用程序中了。要安裝MUI，請(qǐng)運(yùn)行以下命令 -

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

第 3 步：創(chuàng)建芯片

要添加或創(chuàng)建芯片，我們使用 <Chip> API 組件，如下語法所示 -

const CopyChip = styled(Chip)(() => ({
   //add custom CSS styles below this
   …
})
<Chip label="Click label" />

這就是使用芯片動(dòng)作的全部步驟。

例

在此示例中，我們自定義了芯片組件的填充變體。在這里，我們定義了多個(gè) CSS 屬性，如邊框、邊框半徑、顏色等，以將變體更改為填充。此外，我們還添加了帶有自定義 CSS 規(guī)范（如顏色和大?。┑膭h除圖標(biāo)。

import Chip from "@mui/material/Chip";
import { styled } from "@mui/material/styles"

//Create a custom chip using styled
const MuiChipCustom = styled(Chip)(() => ({
   width: 150, //adding custom css styles
   height: 50,
   backgroundColor: 'lightblue',
   borderRadius: 2,
   color: 'white',   

   '& .MuiChip-label': {
      color: 'blue', //using the MUI chip label properties
      fontSize: 20
   },

   '& .MuiChip-deleteIcon': {
      color: 'blue',
      fontSize: 20
   },
}));

function App() {

   const deleteHandler = () => {
      alert('You just deleted the chip!')
   };

   return (
      <div
         style={{
            padding: 40,
            gap: 10,
            display: 'flex',
            flexDirection: 'row'
         }}>
         <MuiChipCustom label="delete chip" variant="filled" onDelete={deleteHandler} />
         <MuiChipCustom label="delete chip" variant="filled" onDelete={deleteHandler} />
      </div>
   );
};
export default App;

輸出

例

在此示例中，我們自定義了芯片組件的概述變體。在這里，我們定義了多個(gè) CSS 屬性，如邊框、邊框半徑、顏色等，以將變體更改為輪廓，在這里我們還可以從芯片組件中刪除變體道具，因?yàn)樗匀豢梢怨ぷ鳌?/p>

import React from "react";
import { Chip } from "@mui/material";
import { styled } from "@mui/material/styles"

const MuiChipCustom = styled(Chip)(() => ({
   border: '2px solid lightblue',
   borderRadius: 25,
   width: 150,
   height: 50,
   color: 'white',   

   '& .MuiChip-label': {
      color: 'lightblue',
      fontSize: 20
   },
}));

const App = () => {
   const handleClick = () => {
      alert('You just clicked the chip!')
   };

   return (
      <div
         style={{
            padding: 40,
            gap: 10,
            display: 'flex',
            flexDirection: 'row'
         }}>
         <MuiChipCustom label="click me" variant="outlined" onClick={handleClick} />
         <MuiChipCustom label="click me" variant="outlined" onClick={handleClick} />
      </div>
   );
};
export default App;

輸出

例

在此示例中，我們自定義了芯片組件中的圖標(biāo)。在這里，我們使用了 &.MuiChip-icon CSS 屬性，用于更改在芯片開頭添加的圖標(biāo)的顏色和字體大小，以使其自定義。

import React from "react";
import { Chip } from "@mui/material";
import { styled } from "@mui/material/styles"
import { Clear, Delete, DeleteForever, Done } from "@mui/icons-material";

const MuiChipCustom = styled(Chip)(() => ({
   border: '2px solid green',
   borderRadius: 25,
   width: 150,
   height: 50,
   color: 'white',   

   '& .MuiChip-label': {
      color: 'green',
      fontSize: 20,
   },

   '& .MuiChip-icon': {
      color: 'green',
      fontSize: 30
   },
}));

function App() {

   const handleClick = () => {
      alert('You just clicked the chip!')
   };

   return (
      <div
         style={{
            padding: 40,
            gap: 10,
            display: 'flex',
            flexDirection: 'row'
         }}>
         <MuiChipCustom icon={<Done />} label="click me" variant="outlined" onClick={handleClick} />
         <MuiChipCustom icon={<Delete />} label="click me" variant="outlined" onClick={handleClick} />
         <MuiChipCustom icon={<DeleteForever />} label="click me" variant="outlined" onClick={handleClick} />
         <MuiChipCustom icon={<Clear />} label="click me" variant="outlined" onClick={handleClick} />
      </div>
   );
};

export default App;

輸出

例

在此示例中，我們對(duì)芯片組件中的頭像進(jìn)行了一些更改。我們利用了 &.MuiChip 頭像 CSS 屬性來調(diào)整芯片中頭像的大小并賦予其外觀。

import React from "react";
import { Avatar, Chip } from "@mui/material";
import { styled } from "@mui/material/styles"

const MuiChipCustom = styled(Chip)(() => ({
   border: '2px solid green',
   borderRadius: 25,
   width: 200,
   height: 50,
   color: 'white',   

   '& .MuiChip-label': {
      color: 'green',
      fontSize: 20,
   },

   '& .MuiChip-avatar': {
      width: 40,
      height: 40
   },

}));

function App() {

   const handleClick = () => {
      alert('You just clicked the chip!')
   };

   return (
      <div
         style={{
            padding: 40,
            gap: 10,
            display: 'flex',
            flexDirection: 'row'
         }}>
         <MuiChipCustom avatar={<Avatar alt="tp" src="https://play-lh.googleusercontent.com/F10OOHNkeNbOf5x9DYpoihAIkLRlSMxCsPHyCErXgm0oM2gZtJwVymJIZoN59v4JJWBZ" />} label="tutorialspoint" variant="outlined" onClick={handleClick} />
         <MuiChipCustom avatar={<Avatar alt="tp" src="https://play-lh.googleusercontent.com/F10OOHNkeNbOf5x9DYpoihAIkLRlSMxCsPHyCErXgm0oM2gZtJwVymJIZoN59v4JJWBZ" />} label="tutorialspoint" variant="outlined" onClick={handleClick} />
         <MuiChipCustom avatar={<Avatar alt="tp" src="https://play-lh.googleusercontent.com/F10OOHNkeNbOf5x9DYpoihAIkLRlSMxCsPHyCErXgm0oM2gZtJwVymJIZoN59v4JJWBZ" />} label="tutorialspoint" variant="outlined" onClick={handleClick} />
         <MuiChipCustom avatar={<Avatar alt="tp" src="https://play-lh.googleusercontent.com/F10OOHNkeNbOf5x9DYpoihAIkLRlSMxCsPHyCErXgm0oM2gZtJwVymJIZoN59v4JJWBZ" />} label="tutorialspoint" variant="outlined" onClick={handleClick} />
      </div>
   );
};
export default App;

輸出

結(jié)論

綜上所述，在整篇文章中，我們探討了如何在 React MUI 中個(gè)性化芯片組件。我們已經(jīng)介紹了實(shí)現(xiàn)這些自定義的所有步驟，包括修改已刪除的圖標(biāo)、背景顏色和不同變體等示例。

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

如何在Material UI中自定義芯片？

如何在Material UI中自定義芯片？

芯片 API

定制芯片所需的步驟

第 1 步：創(chuàng)建 react 應(yīng)用程序

第 2 步：將 MUI 添加到 React

第 3 步：創(chuàng)建芯片

例

輸出

例

輸出

例

輸出

例

輸出

結(jié)論

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

如何在Material UI中自定義芯片？

芯片 API

定制芯片所需的步驟

第 1 步：創(chuàng)建 react 應(yīng)用程序

第 2 步：將 MUI 添加到 React

第 3 步：創(chuàng)建芯片

例

輸出

例

輸出

例

輸出

例

輸出

結(jié)論

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

如何在Material UI中自定義芯片？