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

AspectRatioAPI

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

演示

导入

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

通过阅读有关最小化 bundle size 的指南，了解它们之间的区别。

Props

原生组件的 Props 也可用。

名称类型默认值描述
childrennode-

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

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

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

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

componentelementType-

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

flexboolfalse

默认情况下，AspectRatio 将保持其内容的纵横比。当容器是 flex 行并且您希望 AspectRatio 填充其容器的高度时，将此 prop 设置为 true。

maxHeightnumber
| string		-

元素的最大计算高度（不是 CSS 高度）。

minHeightnumber
| string		-

元素的最小计算高度（不是 CSS 高度）。

objectFit'-moz-initial'
| 'contain'
| 'cover'
| 'fill'
| 'inherit'
| 'initial'
| 'none'
| 'revert-layer'
| 'revert'
| 'scale-down'
| 'unset'		'cover'

第一个子元素的 CSS object-fit 值。

rationumber
| string		'16 / 9'

元素的纵横比。当前的实现使用 padding 而不是 CSS 纵横比，因为浏览器支持问题。https://caniuse.cn/?search=aspect-ratio

slotProps{ content?: func
| object, root?: func
| object }		{}

内部每个 slot 使用的 props。

slots{ content?: elementType, root?: elementType }{}

内部每个 slot 使用的组件。

有关更多详细信息，请参见下面的Slots API。

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

系统 prop，允许定义系统 overrides 以及其他 CSS 样式。

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

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

要使用的全局 variant。

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

ref 被转发到根元素。

主题默认 Props

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

Slots

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

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

CSS 类

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

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

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

源代码

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