Change cursor type - Material UI Expansion Panel

Question

I am using the MiU component "Expasion panel". When the user hovers over the panel, the default behaviour is to set the cursor to pointer. I modified it to display a default cursor instead. However, it does not work.

My component:

<ExpansionPanel>
  <ExpansionPanelSummary
    className={classes.expasionPannelSummary}
  >
    ....rest of the code...
  </ExpansionPanelSummary
</ExpansionPanel>

My styles.js

expasionPannelSummary: {
    cursor: 'default',
    '&:hover': {
      cursor: 'default'
    },
    padding:them.spacing(1,3,1,3)
}

If I inspect the page, on the CSS says cursor: "default" but it is not.

In most browsers the pointer option is a hand, are you trying to display the default cursor? If so, you should look at the default option, List cursor of options here — DBS
I am trying to display the arrow. I changed also cursor: "pointer to cursor: default, but nothing changes. I updated my initial question, specifing that I need the arrow (default). — Magofoco
Regarding: the CSS part it is written "default" but it is canceled out, that means your CSS is being overwritten by some other CSS, which we can't really help with without seeing more of the code. Generally you can see where it's being overwritten by scrolling up in the dev tools until you find where that property is being set. — DBS

Dekel Dekel · Accepted Answer · 2020-04-23T22:27:14

The issue that you have is with the following css selector:

.MuiExpansionPanelSummary-root:hover:not(.Mui-disabled) {
    cursor: pointer;
}

As you can see - it overrides your cursor: default that you are trying to apply.

To handle this you can use the createMuiTheme and set the following:

const myTheme = createMuiTheme({
  overrides: {
    MuiExpansionPanelSummary: {
      root: {
        "&:hover:not(.Mui-disabled)": {
          cursor: "default"
        }
      }
    }
  }
});

Here is a working example: https://codesandbox.io/s/expansion-cursor-change-ywqq5?file=/demo.js

Change cursor type - Material UI Expansion Panel

2 Answers