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.

• javascript
• css
• reactjs
• material-ui

4 Answers 4

Below 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']} />}
>