更改光标类型-材质UI扩展面板

Question

我正在使用MiU组件“扩展面板”。 当用户将鼠标悬停在面板上时，默认行为是将光标设置为pointer。 我将其修改为显示default光标。 但是，它不起作用。

我的组件：

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

我的 styles.js

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

如果我检查页面，则CSS上显示cursor: "default"，但不是。

Answer 1

您遇到的问题与以下CSS选择器有关：

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

如您所见-它会覆盖您尝试申请的cursor: default。

要处理此问题，您可以使用createMuiTheme并进行以下设置：

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

这是一个有效的示例：https://codesandbox.io/s/expansion-cursor-change-ywqq5?file=/demo.js

Answer 2

我认为问题在于Material-ui管理样式的方式。请尝试以下操作：

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

检查API for the component和how to override the styles in material-ui。