跳到内容跳到内容
🚀 影响 乐悦 UI 2025 年路线图！参与最新的开发者调查

芯片API

React Chip 组件的 API 参考文档。了解有关此导出模块的 props、CSS 和其他 API 的信息。

演示

导入

import Chip from '@mui/joy/Chip';
// or
import { Chip } from '@mui/joy';

通过阅读有关最小化 bundle 大小的指南，了解差异。



芯片以小块形式表示复杂实体，例如联系人。

Props

本地组件的 Props 也可用。

名称类型默认值描述
children节点-

组件的内容。

color'danger'
| 'neutral'
| 'primary'
| 'success'
| 'warning'
| 字符串		'neutral'

组件的颜色。它支持适用于此组件的那些主题颜色。

要了解如何添加自己的颜色，请查看主题组件 - 扩展颜色。

componentelementType-

用于根节点的组件。可以是用于 HTML 元素的字符串或组件。

disabled布尔值false

如果为 true，则禁用该组件。

endDecorator节点-

放置在 children 之后的元素。

onClick函数-

元素操作点击处理程序。

size'lg'
| 'md'
| 'sm'
| 字符串		'md'

组件的尺寸。它接受 'sm' 和 'lg' 之间的主题值。

要了解如何向组件添加自定义尺寸，请查看主题组件 - 扩展尺寸。

slotProps{ action?: func
| object, endDecorator?: func
| object, label?: func
| object, root?: func
| object, startDecorator?: func
| object }		{}

用于每个内部插槽的 props。

slots{ action?: elementType, endDecorator?: elementType, label?: elementType, root?: elementType, startDecorator?: elementType }{}

用于每个内部插槽的组件。

有关更多详细信息，请参阅下面的插槽 API。

startDecorator节点-

放置在 children 之前的元素。

sx数组<func
| object
| 布尔值>
| 函数
| object		-

允许定义系统覆盖以及其他 CSS 样式的系统 prop。

有关更多详细信息，请参阅 `sx` 页面。

variant'outlined'
| 'plain'
| 'soft'
| 'solid'
| 字符串		'soft'

要使用的全局变体。

要了解如何添加自己的变体，请查看主题组件 - 扩展变体。

ref 被转发到根元素。

主题默认 props

您可以使用 JoyChip 通过主题更改此组件的默认 props。

插槽

要了解如何自定义插槽，请查看覆盖组件结构指南。

插槽名称类名默认组件描述
root.MuiChip-root'div'渲染根的组件。
label.MuiChip-label'span'渲染标签的组件。
action'button'渲染操作的组件。
startDecorator.MuiChip-startDecorator'span'渲染头部装饰器的组件。
endDecorator.MuiChip-endDecorator'span'渲染尾部装饰器的组件。

CSS 类

这些类名对于使用 CSS 进行样式设置很有用。当触发特定状态时，它们会应用于组件的插槽。

类名规则名称描述
.Mui-disabled如果 disabled={true}，则应用于根元素的状态类。
.Mui-focusVisible如果键盘聚焦，则应用于根元素的状态类。
.MuiChip-colorContextcolorContext当触发颜色反转时，应用于根元素的类名。
.MuiChip-colorDangercolorDanger如果 color="danger"，则应用于根元素的类名。
.MuiChip-colorNeutralcolorNeutral如果 color="neutral"，则应用于根元素的类名。
.MuiChip-colorPrimarycolorPrimary如果 color="primary"，则应用于根元素的类名。
.MuiChip-colorSuccesscolorSuccess如果 color="success"，则应用于根元素的类名。
.MuiChip-colorWarningcolorWarning如果 color="warning"，则应用于根元素的类名。
.MuiChip-labelLglabelLg如果 size="lg"，则应用于标签 span 元素的类名。
.MuiChip-labelMdlabelMd如果 size="md"，则应用于标签 span 元素的类名。
.MuiChip-labelSmlabelSm如果 size="sm"，则应用于标签 span 元素的类名。
.MuiChip-sizeLgsizeLg如果 size="lg"，则应用于根元素的类名。
.MuiChip-sizeMdsizeMd如果 size="md"，则应用于根元素的类名。
.MuiChip-sizeSmsizeSm如果 size="sm"，则应用于根元素的类名。
.MuiChip-variantOutlinedvariantOutlined如果 variant="outlined"，则应用于根元素的类名。
.MuiChip-variantPlainvariantPlain如果 variant="plain"，则应用于根元素的类名。
.MuiChip-variantSoftvariantSoft如果 variant="soft"，则应用于根元素的类名。
.MuiChip-variantSolidvariantSolid如果 variant="solid"，则应用于根元素的类名。

您可以使用以下自定义选项之一覆盖组件的样式

源代码

如果您在此页面中没有找到信息，请考虑查看组件的实现以获取更多详细信息。