跳过内容跳过内容

卡片溢出API

React CardOverflow 组件的 API 参考文档。了解此导出模块的 props、CSS 和其他 API。

演示

导入

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

通过阅读本指南,了解有关最小化 bundle 大小的区别

Props

原生组件的 Props 也可用。

名称类型默认值描述
childrennode-

如果未设置 src,则用于在 CardOverflow 内部渲染图标或文本元素。这可以是元素,也可以只是一个字符串。

color'danger'
| 'neutral'
| 'primary'
| 'success'
| 'warning'
| string
'neutral'

组件的颜色。它支持对此组件有意义的那些主题颜色。

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

componentelementType-

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

slotProps{ root?: func
| object }
{}

用于内部每个 slot 的 props。

slots{ root?: elementType }{}

用于内部每个 slot 的组件。

有关更多详细信息,请参阅下面的 Slots API

sxArray<func
| object
| bool>
| func
| object
-

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

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

variant'outlined'
| 'plain'
| 'soft'
| 'solid'
| string
'plain'

要使用的全局 variant

要了解如何添加自己的 variants,请查看主题组件 - 扩展 variants

ref 被转发到根元素。

主题默认 props

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

Slots

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

Slot 名称类名默认组件描述
root.MuiCardOverflow-root'div'渲染 root 的组件。

CSS 类

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

类名规则名称描述
.MuiCardOverflow-colorContextcolorContext当触发颜色反转时,应用于 root 元素的类名。
.MuiCardOverflow-colorDangercolorDanger如果 color="danger",则应用于 root 元素的类名。
.MuiCardOverflow-colorNeutralcolorNeutral如果 color="neutral",则应用于 root 元素的类名。
.MuiCardOverflow-colorPrimarycolorPrimary如果 color="primary",则应用于 root 元素的类名。
.MuiCardOverflow-colorSuccesscolorSuccess如果 color="success",则应用于 root 元素的类名。
.MuiCardOverflow-colorWarningcolorWarning如果 color="warning",则应用于 root 元素的类名。
.MuiCardOverflow-variantOutlinedvariantOutlined如果 variant="outlined",则应用于 root 元素的类名。
.MuiCardOverflow-variantPlainvariantPlain如果 variant="plain",则应用于 root 元素的类名。
.MuiCardOverflow-variantSoftvariantSoft如果 variant="soft",则应用于 root 元素的类名。
.MuiCardOverflow-variantSolidvariantSolid如果 variant="solid",则应用于 root 元素的类名。

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

源代码

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