Trying to figure out how to get material-ui themes to work how I want it to, and having some trouble.
what I want is for my expansion panels to have a different arrow color when expanded to make them more visible. The catch is that I need this behavior only on parent expansion panels, and not expansion panels within expansion panels.
Currently I have written my material-ui theme so that only parent expansion panels have their color change when expanded, like so:
My issue is that the black arrow is hard to see against the dark-blue panel summary. I would like to be able to change that color to white, but only when in a parent panel. So basically, whenever an ExpansionPanelSummary is blue, the arrow should be white.
I can't seem to find a CSS control to do what I want. Here is my theme for ExpansionPanelSummary that controls the color (I think my CSS for the arrow should be in here somewhere but I'm not sure):
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"
}
}
},
Any help or pointers would be appreciated.
Trying to figure out how to get material-ui themes to work how I want it to, and having some trouble.
what I want is for my expansion panels to have a different arrow color when expanded to make them more visible. The catch is that I need this behavior only on parent expansion panels, and not expansion panels within expansion panels.
Currently I have written my material-ui theme so that only parent expansion panels have their color change when expanded, like so:
My issue is that the black arrow is hard to see against the dark-blue panel summary. I would like to be able to change that color to white, but only when in a parent panel. So basically, whenever an ExpansionPanelSummary is blue, the arrow should be white.
I can't seem to find a CSS control to do what I want. Here is my theme for ExpansionPanelSummary that controls the color (I think my CSS for the arrow should be in here somewhere but I'm not sure):
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"
}
}
},
Any help or pointers would be appreciated.
Share Improve this question asked Dec 3, 2019 at 16:15 Sajid AnsariSajid Ansari 1652 silver badges15 bronze badges4 Answers
Reset to default 3Below is one way of achieving this which uses the MuiExpansionPanelSummary-expandIcon
class to target the icon and overrides this back to the default for the nested expansion panel.
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);
Went with the rare, but useful inline style
<AccordionSummary
expandIcon={<ExpandMoreIcon style={{ color: 'white' }} />}
aria-controls="panel1-content"
id="panel1-header"
>
Text Here
</AccordionSummary>
it does the job, but I usually try and avoid the inline option
just gave it a className and some some style, no rocket science
color: themify-get('body_fontColor'); // replace with desired color
<AccordionSummary expandIcon={<FontAwesomeIcon icon={faChevronDown} className={styles['expand-more-icon']} />}
>