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

在本文中，我们将学习如何在 Material UI 中自定义芯片。芯片是代表输入、属性或操作的小组件。借助芯片，用户可以输入数据、选择选项、过滤内容或启动流程。

该芯片也可以在 React 的 MUI 中定制。芯片的定制可能包括更改芯片颜色、自定义删除图标、添加头像或使用其根属性创建芯片。我们将在本文中看到所有内容。

要在 MUI 中使用芯片，我们需要了解它们的 API 及其相关道具。

芯片 API

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

  • avatar - 为了在芯片上显示头像，我们使用 avatar 属性。

  • classes - 为了自定义组件的样式，我们可以利用 classes 属性。

  • color − 如果要个性化芯片颜色，可以使用 color 属性来实现。

  • component - component属性在芯片中呈现根组件。

  • 可点击 - 通过使用这个属性，我们可以使芯片可点击。按下时将其抬起。

  • deleteIcon - 如果要更改芯片组件中的图标，可以使用deleteIcon进行修改。

  • 禁用 - 要禁用芯片，只需使用 disabled。

  • 图标 - 您可以选择利用 icon 属性将图标添加到芯片。

  • label − label 属性用于向组件添加内容。

  • onDelete − 为了显示删除图标，我们使用 onDelete 属性。

  • 尺寸 - 要调整芯片的大小，请使用此尺寸道具。

  • skipFocusWhenDisabled − 要跳过对芯片的关注，请相应地使用 prop。

  • sx − 要为芯片组件添加自定义样式，请使用 thesx 属性。

  • 变体 - 如果您想要不同的芯片变体，请使用 prop。

定制芯片所需的步骤

要在Material UI中制作自定义芯片组件，请参阅给定的步骤

第 1 步：创建 react 应用程序

在继续在 MUI 中自定义芯片组件之前，我们需要创建一个 react 应用程序。要创建新的 React 应用程序，请在终端中运行以下命令

npx create react app chipcompproject

创建项目后，通过运行 − 导航到其目录

cd chipcompproject

第 2 步：将 MUI 添加到 React

创建 react 应用程序后，就可以将 Material UI 安装到 react 应用程序中了。要安装MUI，请运行以下命令 -

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

第 3 步：创建芯片

要添加或创建芯片，我们使用 <Chip> API 组件，如下语法所示 -

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

这就是使用芯片动作的全部步骤。

例

在此示例中，我们自定义了芯片组件的填充变体。在这里，我们定义了多个 CSS 属性，如边框、边框半径、颜色等，以将变体更改为填充。此外，我们还添加了带有自定义 CSS 规范（如颜色和大小）的删除图标。

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;

输出

例

在此示例中，我们自定义了芯片组件的概述变体。在这里，我们定义了多个 CSS 属性，如边框、边框半径、颜色等，以将变体更改为轮廓，在这里我们还可以从芯片组件中删除变体道具，因为它仍然可以工作。

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;

输出

例

在此示例中，我们自定义了芯片组件中的图标。在这里，我们使用了 &.MuiChip-icon CSS 属性，用于更改在芯片开头添加的图标的颜色和字体大小，以使其自定义。

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;

输出

例

在此示例中，我们对芯片组件中的头像进行了一些更改。我们利用了 &.MuiChip 头像 CSS 属性来调整芯片中头像的大小并赋予其外观。

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;

输出

结论

综上所述，在整篇文章中，我们探讨了如何在 React MUI 中个性化芯片组件。我们已经介绍了实现这些自定义的所有步骤，包括修改已删除的图标、背景颜色和不同变体等示例。

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

友情链接更多精彩内容