更改光标类型 - Material 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