css - React - Material-UI Accordion:如何使标题居中并展开图标
问题描述
我目前正在我的 react 项目中实现 Material-UI 库的 Accordion 组件:
我想要做的是将手风琴摘要(带有“Accordion 1”,“Accordion 2”的标题)居中,并将展开图标(箭头)放在正下方,也居中。
在 Material-UI 文档 ( https://material-ui.com/components/accordion/ ) 中,显示的布局如下所示:
使用以下代码(如文档中所示):
import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Accordion from '@material-ui/core/Accordion';
import AccordionSummary from '@material-ui/core/AccordionSummary';
import AccordionDetails from '@material-ui/core/AccordionDetails';
import Typography from '@material-ui/core/Typography';
import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
const useStyles = makeStyles((theme) => ({
root: {
width: '100%',
},
heading: {
fontSize: theme.typography.pxToRem(15),
fontWeight: theme.typography.fontWeightRegular,
},
}));
export default function SimpleAccordion() {
const classes = useStyles();
return (
<div className={classes.root}>
<Accordion>
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="panel1a-content"
id="panel1a-header"
>
<Typography className={classes.heading}>Accordion 1</Typography>
</AccordionSummary>
<AccordionDetails>
<Typography>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex,
sit amet blandit leo lobortis eget.
</Typography>
</AccordionDetails>
</Accordion>
<Accordion>
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="panel2a-content"
id="panel2a-header"
>
<Typography className={classes.heading}>Accordion 2</Typography>
</AccordionSummary>
<AccordionDetails>
<Typography>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex,
sit amet blandit leo lobortis eget.
</Typography>
</AccordionDetails>
</Accordion>
<Accordion disabled>
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="panel3a-content"
id="panel3a-header"
>
<Typography className={classes.heading}>Disabled Accordion</Typography>
</AccordionSummary>
</Accordion>
</div>
);
}
谢谢你!
解决方案
将摘要内容的 flex-grow从 1更改为 0 似乎就足够了:
import { withStyles } from "@material-ui/core/styles";
import MuiAccordionSummary from "@material-ui/core/AccordionSummary";
const AccordionSummary = withStyles({
content: {
flexGrow: 0
}
})(MuiAccordionSummary);
如果您希望箭头在摘要文本下方居中(而不是像我的第一个示例中那样靠近它),那么您可以使用以下内容:
const AccordionSummary = withStyles({
root: {
flexDirection: "column"
},
content: {
marginBottom: 0
},
expandIcon: {
marginRight: 0,
paddingTop: 0
}
})(MuiAccordionSummary);
第二个示例还演示了使用 SimpleAccordion 的类(根据评论中的要求)使用withStyles
代替makeStyles
/useStyles
作为示例中的附加样式。
推荐阅读
- ios - 无法在 iOS 上使用 ImagePicker 进行本机反应
- reactjs - 属性的 TypeScript React 组件库文档
- html - Typeform如何在嵌入式typeform中编辑css边框半径
- php - How to create a MapReduce query in MongoDb to calculate average of exam scores?
- python - 将 Pandas Series 的 2D numpy 数组转换为 Pandas DataFrame 的 1D numpy 数组的列
- r - 使用简单特征 (sf) 获取距离内的字段值总和
- angular - 在 Angular 中结合 RxJS Observable
- google-chrome - 如何检测 chrome 选项卡是否通过扩展加载而没有错误
- reactjs - Reactjs 排序和过滤组件
- javascript - 为什么这个事件处理程序有两个箭头函数?