css - 更改光标类型 - Material UI 扩展面板

Question

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

我的 组件 :

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

我的 style.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