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

Question

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

我的组件：

<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 管理 styles 的方式。 尝试以下方法：

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

检查组件的 API以及如何覆盖 material-ui 中的 styles 。