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

Question

Кнопка имеет следующий стиль:

floatButton: {
    position: 'fixed',
    bottom: theme.spacing.unit * 2,
    right: theme.spacing.unit * 2
}

И компонент кнопки выглядит так:

<Button
  className={classes.floatButton}
  variant="fab"
  color="secondary"
  onClick={this.handleHideElement}
>
  <AddIcon />
</Button>

Проблема возникает, когда окна браузера маленькие и я не могу нажать кнопку:

введите описание изображения здесь

По какой-то причине кнопка немного прозрачна, а функция onClick не работает.

Как я могу решить эту проблему?

Спасибо.

Answer 1

Попробуйте дать кнопке более высокий z-индекс, чем все остальное. Это должно сделать его кликабельным и избавиться от прозрачности.