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

AccordionSummaryAPI

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

演示

导入

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

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

Props

ButtonBase 组件的 Props 也可用。

名称类型默认值描述
childrennode-

组件的内容。

classesobject-

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

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

expandIconnode-

用作展开指示器的图标。

focusVisibleClassNamestring-

此 prop 可以帮助识别哪个元素具有键盘焦点。当元素通过键盘交互获得焦点时,将应用类名。它是 CSS :focus-visible 选择器 的一个 polyfill。使用此功能的理由在此处进行了解释。如果需要,可以使用 polyfillfocus-visible 类应用于其他组件。

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

用于每个内部插槽的 props。

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

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

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

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

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

ref 被转发到根元素。

继承

虽然上面没有明确记录,但 ButtonBase 组件的 props 也可在 AccordionSummary 中使用。您可以利用这一点来定位嵌套组件

主题默认 props

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

插槽

插槽名称类名默认组件描述
root.MuiAccordionSummary-rootButtonBase渲染 root 插槽的组件。
content.MuiAccordionSummary-contentdiv渲染 content 插槽的组件。
expandIconWrapper.MuiAccordionSummary-expandIconWrapperdiv渲染 expand icon wrapper 插槽的组件。

CSS 类

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

类名规则名称描述
.Mui-disabled如果 disabled={true},则应用于根元素的状态类。
.Mui-expanded如果 expanded={true},则应用于根元素、children wrapper 元素和 IconButton 组件的状态类。
.Mui-focusVisible如果按钮获得键盘焦点,则应用于 ButtonBase 根元素的状态类。
.MuiAccordionSummary-contentGutterscontentGutters除非 disableGutters={true},否则应用于 children wrapper 元素的样式。
.MuiAccordionSummary-guttersgutters除非 disableGutters={true},否则应用于根元素的样式。

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

源代码

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