![](/img/trans.png)
[英]How to pull properties from `createMuiTheme` inside Material-UI `ExpansionPanel`?
[英]Change ExpansionPanel arrow color on expanded parent ExpansionPanel in material-ui
试图弄清楚如何让 material-ui 主题按照我想要的方式工作,但遇到了一些麻烦。
我想要的是我的扩展面板在扩展时具有不同的箭头颜色,以使它们更明显。 问题是我只在父扩展面板上需要这种行为,而不是扩展面板中的扩展面板。
目前我已经编写了我的 material-ui 主题,以便只有父扩展面板在展开时会改变颜色,如下所示:
我的问题是在深蓝色面板摘要中很难看到黑色箭头。 我希望能够将该颜色更改为白色,但仅限于在父面板中时。 所以基本上,只要 ExpansionPanelSummary 是蓝色的,箭头就应该是白色的。
我似乎找不到一个 CSS 控件来做我想做的事。 这是我用于控制颜色的 ExpansionPanelSummary 的主题(我认为我的箭头 CSS 应该在此处的某个位置,但我不确定):
MuiExpansionPanelSummary: {
root: {
minHeight: "0px",
minWidth: "0px",
"&$expanded": {
//Elevation 1
boxShadow:
"0px 1px 3px 0px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 2px 1px -1px rgba(0, 0, 0, 0.12)",
minHeight: "0px",
backgroundColor: "#3f51b5",
color: "white"
},
".MuiExpansionPanelDetails-root &$expanded": {
backgroundColor: "transparent",
color: "black"
}
},
content: {
minWidth: "0px",
margin: "8px 0px",
"&$expanded": {
margin: "8px 0px"
}
}
},
任何帮助或指示将不胜感激。
下面是实现此目的的一种方法,它使用MuiExpansionPanelSummary-expandIcon
类来定位图标并将其覆盖回嵌套扩展面板的默认值。
import { createMuiTheme } from "@material-ui/core";
const defaultTheme = createMuiTheme();
const myTheme = createMuiTheme({
overrides: {
MuiExpansionPanelSummary: {
root: {
minHeight: "0px",
minWidth: "0px",
"&$expanded": {
//Elevation 1
boxShadow:
"0px 1px 3px 0px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 2px 1px -1px rgba(0, 0, 0, 0.12)",
minHeight: "0px",
backgroundColor: "#3f51b5",
color: "white",
"& .MuiExpansionPanelSummary-expandIcon": {
color: "white"
}
},
".MuiExpansionPanelDetails-root &$expanded": {
backgroundColor: "transparent",
color: "black",
"& .MuiExpansionPanelSummary-expandIcon": {
color: defaultTheme.palette.action.active
}
}
}
}
}
});
export default myTheme;
import { React, Component } from 'react';
import { withStyles } from '@material-ui/core/styles';
import Accordion from '@material-ui/core/Accordion';
import AccordionSummary from '@material-ui/core/AccordionSummary';
import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
const styles = {
expand_icon : {
color: "white"
}
}
class ListComponent extends Component {
render() {
const { classes } = this.props;
return (
<div>
<Accordion className={classes.accordion}>
<AccordionSummary
className={classes.accordion_summary}
expandIcon={<ExpandMoreIcon className={classes.expand_icon} />}
aria-controls="panel1a-content"
id="panel1a-header"
>
<Typography></Typography>
</AccordionSummary>
</Accordion>
</div>
)
}
}
export default withStyles(styles, { withTheme: true })(ListComponent);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.