Изменить тип курсора - Панель расширения пользовательского интерфейса материала

Question

Я использую компонент MiU "Панель расширения". Когда пользователь наводит курсор на панель, поведение по умолчанию - установить курсор на pointer. Я изменил его, чтобы вместо него отображался курсор default. Однако это не работает.

Мой компонент :

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

Мой стилей. 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 для компонента и , как переопределить стили в material-ui .