gpt4 book ai didi

reactjs - 如何将 MUI Accordion 的标题颜色更改为灰色?

转载 作者:行者123 更新时间:2023-12-02 01:57:35 25 4
gpt4 key购买 nike

我是 React 的 Material-UI 新手。我有一个关于 MUI Accordion 的非常简单的问题。我有以下代码:

import React from "react";
import { makeStyles, withStyles } from "@material-ui/core/styles";
import Accordion from "@material-ui/core/Accordion";
import MuiAccordionSummary 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
}
}));

const AccordionSummary = withStyles({
})(MuiAccordionSummary);

export default function SimpleAccordion() {
const classes = useStyles();

return (
<div className={classes.root}>
<Accordion
defaultExpanded={true}
>
<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
defaultExpanded={true}
>
<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>
</div>
);
}

看起来像:

enter image description here

我正在尝试将页眉的颜色更改为灰色。如何实现?

最佳答案

除非我遗漏了什么,只需更改 AccordionSummary 的背景颜色:

V5

<AccordionSummary
sx={{
backgroundColor: "gray"
}}
>

V4

const useStyles = makeStyles({
summary: {
backgroundColor: 'gray',
}
);
<AccordionSummary
className={classes.summary}
>

现场演示

Codesandbox Demo

关于reactjs - 如何将 MUI Accordion 的标题颜色更改为灰色?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/69418421/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com