CODEWITHSUNDEEP
cssreactjsmaterial-ui
Magofoco
Magofoco

Reputation: 5446

Change cursor type - Material UI Expansion Panel

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)
}

CSS

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

Upvotes: 6

Views: 34122

Answers (2)

Dekel
Dekel

Reputation: 62556

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

Upvotes: 5

rowinbot
rowinbot

Reputation: 632

I think the issue is with the way material-ui manages styles. Try with the following:

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

Check the API for the component and how to override the styles in material-ui.

Upvotes: 0

Related Questions