[英]How to customize material-ui Accordion component behavior/style?
I have a div container (gray) with an accordion component with just one AccordionSummary component.我有一个带有手风琴组件的 div 容器(灰色),只有一个 AccordionSummary 组件。 And another div (blue) below that.下面还有一个 div(蓝色)。 Everything looks good (pic #1).一切看起来都不错(图 1)。 When I expand the accordion:当我展开手风琴时:
Assume it's a standard Accordion component behavior.假设它是标准的 Accordion 组件行为。 But has anyone of you met such issue and how did you deal with it?但是你们中有人遇到过这样的问题吗,你们是如何处理的?
using flexbox and a general padding for the root element and a margin top for the blue element.使用 flexbox 和根元素的一般填充以及蓝色元素的边距顶部。
I think your problem is that you set an absolute height to the gray element like 300px which makes the problem use height: "auto" and a general padding我认为你的问题是你为灰色元素设置了一个绝对高度,比如 300px 这使得问题使用 height: "auto" 和一般填充
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: {
display: "flex",
flexDirection: "column",
alignItems: "center",
width: "100%",
backgroundColor: "#eee",
padding: 20,
},
heading: {
fontSize: theme.typography.pxToRem(15),
fontWeight: theme.typography.fontWeightRegular
},
rectangle: {
width: "80%",
height: 200,
backgroundColor: "blue",
marginTop:20
}
}));
export default function App() {
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>
<div className={classes.rectangle} />
</div>
);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.