更改光标类型 - 材质 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。