Accordion API
想要学习更多组件属性和 CSS API,可以查阅 React Accordion 组件的 API 文档。
导入
import Accordion from '@mui/material/Accordion';
// 或
import { Accordion } from '@mui/material';
组件名称
在主题中,名称“MuiAccordion
”可用于提供默认属性(props),或者样式覆盖属性
Paper 组件的属性也是可用的。
名称 | 类型 | 默认值 | 描述 |
---|---|---|---|
children* | node | 组件的内容 | |
classes | object | 覆盖或扩展应用于组件的样式。请参阅下面 CSS API 了解更多详情。 | |
defaultExpanded | bool | false | 如果 true , 自动打开折叠面板。 |
disabled | bool | false | 如果被设置为 true ,那么该组件将会被禁用。 |
disableGutters | bool | false | 如果 true , 它会移除两个打开的折叠面板的边距和增加的高度。 |
expanded | bool | false | 如果 true , 则打开折叠面板, 否则关闭折叠面板。 设置此属性允许控制折叠面板. |
onChange | func | Callback fired when the expand/collapse state is changed. Signature: function(event: object, expanded: boolean) => void event: The event source of the callback. Warning: This is a generic event not a change event. expanded: The expanded state of the accordion. | |
square | bool | false | 如果 true , 圆角将被禁用。 |
sx | Array<func | object | bool> | func | object | The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details. | |
TransitionComponent | elementType | Collapse | The component used for the transition. Follow this guide to learn more about the requirements for this component. |
TransitionProps | object | Props applied to the transition element. By default, the element is based on this Transition component. |
ref
则会被传递到根元素中。继承
尽管上文没有明文记录, Paper 组件 的属性(props) 在组件Accordion上同样是可用的。 你可以利用这一点来 指向嵌套组件CSS
规则名称 | 全局类名 | 描述 |
---|---|---|
root | .MuiAccordion-root | 用于根元素的样式。 |
rounded | .MuiAccordion-rounded | 除非 square={true} ,样式适用于 根元素 。 |
expanded | .Mui-expanded | 如果满足expanded={true} ,状态类将适用于根元素 |
disabled | .Mui-disabled | 如果满足disabled={true} ,状态类将适用于根元素 |
gutters | .MuiAccordion-gutters | 除非 disableGutters={true} ,样式适用于 根元素 。 |
region | .MuiAccordion-region | 适用于 区域元素, 子组件的容器 的样式。 |
您可以使用组件自定义选项对组件进行个性化:
- 具备 全局类名.
- 在自定义主体中,设定一个规则名称作为组件的
styleOverrides
属性的一部分。