React, пользовательский интерфейс материала, плавающие кнопки и список действий / ListItem

Question

Я сделал простой список пользовательского интерфейса для материалов с компонентами List и ListItem.

Я добавил кнопку плавающего действия в нижнюю часть экрана (внизу справа). На маленьком экране FAB накладывает компоненты ListItem.

По умолчанию, если я нажму кнопку FAB, будет активирован onClick строки ListItem вместо onClick кнопки FAB.

Есть ли способ установить событие onClick кнопки FAB, чтобы игнорировать ItemList onClick?

Пример: https://codesandbox.io/s/elated-wilbur-1fbe8?fontsize=14

Answer 1

У вас проблема с zIndex. Это должно работать:

const styles = theme => ({
  fabBottom: {
    margin: theme.spacing(1),
    position: "fixed",
    bottom: theme.spacing(6),
    right: theme.spacing(6),
    zIndex: 1000
  }
});

https://codesandbox.io/embed/fast-dream-8dkh7