React Material UI Expansion Panel disable cursor pointer

Question

I want to disable the cursor hover in the Material-ui expansion panel so that the hover only appears on the ExpandIcon:

https://material-ui.com/api/expansion-panel/

I don't want to use the disabled property of ExpansionPanel but I can't find a way to control the cursor pointer behaviour via css in the ExpansionPanelSummary.

joy son joy son · Accepted Answer · 2020-04-25T19:07:50

This changes the mouse have from pointer to default you can not open the panel clicking on the panel but only clicking on the icon opens the summary pannel. Check out sandbox demo

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import ExpansionPanel from "@material-ui/core/ExpansionPanel";
import ExpansionPanelSummary from "@material-ui/core/ExpansionPanelSummary";
import ExpansionPanelDetails from "@material-ui/core/ExpansionPanelDetails";
import Typography from "@material-ui/core/Typography";
import ExpandMoreIcon from "@material-ui/icons/ExpandMore";

const useStyles = makeStyles(theme => ({
  root: {
    width: "100%",
    "& .MuiExpansionPanelSummary-root:hover": {
      cursor: "default"
    }
  },
  panel: {
    cursor: "default"
  },
  heading: {
    fontSize: theme.typography.pxToRem(15),
    fontWeight: theme.typography.fontWeightRegular
  }
}));

export default function SimpleExpansionPanel() {
  const classes = useStyles();
  const [open, setOpen] = React.useState(false);
  return (
    <div className={classes.root}>
      <ExpansionPanel expanded={open}>
        <ExpansionPanelSummary
          expandIcon={<ExpandMoreIcon onClick={() => setOpen(!open)} />}
          classes={{
            // if styles not ovverided it shows flickering
            root: classes.panel // class name, e.g. `classes-nesting-root-x`
          }}
          aria-controls="panel1a-content"
          id="panel1a-header"
        >
          <Typography className={classes.heading}>Expansion Panel 1</Typography>
        </ExpansionPanelSummary>
        <ExpansionPanelDetails>
          <Typography>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
            malesuada lacus ex, sit amet blandit leo lobortis eget.
          </Typography>
        </ExpansionPanelDetails>
      </ExpansionPanel>
    </div>
  );
}

If you want to do it using CSS. then add these lines to your CSS file and then import it. But you might see little flicker because after the default sets the cursor to the pointer you are changing it to default(arrow). You might override that in theme or with the make style and class prop.

.MuiExpansionPanelSummary-root:hover {
  cursor: "default";
}

React Material UI Expansion Panel disable cursor pointer

2 Answers