跳到主要内容跳到主要内容

CardMediaAPI

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

示例

导入

import CardMedia from '@mui/material/CardMedia';
// or
import { CardMedia } from '@mui/material';

通过阅读本指南,了解有关最小化捆绑包大小的差异

属性

本地组件的属性也可用。

名称类型描述
childrennode

组件的内容。

classesobject

覆盖或扩展应用于组件的样式。

有关更多详细信息,请参见下面的 CSS 类 API

componentelementType

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

imagestring

要显示为背景图像的图像。必须指定 imagesrc 属性。请注意,调用者必须指定高度,否则图像将不可见。

srcstring

image 属性的别名。仅适用于媒体组件。媒体组件:videoaudiopictureiframeimg

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

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

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

ref 被转发到根元素。

主题默认属性

您可以使用 MuiCardMedia 通过主题 更改此组件的默认属性。

CSS 类

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

类名规则名称描述
.MuiCardMedia-imgimg如果 component="picture or img",则应用于根元素的样式。
.MuiCardMedia-mediamedia如果 component="video, audio, picture, iframe, or img",则应用于根元素的样式。
.MuiCardMedia-rootroot应用于根元素的样式。

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

源代码

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