我試圖在列表組件的左端和右端有兩個動作按鈕。

單擊輔助操作(右側刪除圖標)時，波紋僅限于唯一的圖標。

單擊主要操作(左側的刪除圖標)時，漣漪效應會影響整行。

預期行為:

我想在主要的漣漪效應，類似于次要的行動按鈕。 重要的是，我不能禁用文本漣漪效應作為臨時解決方案。

代碼示例:

代碼沙盒鏈接

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import ListItemIcon from "@material-ui/core/ListItemIcon";
import ListItemText from "@material-ui/core/ListItemText";

import ListItemSecondaryAction from "@material-ui/core/ListItemSecondaryAction";
import DeleteIcon from "@material-ui/icons/Delete";
import IconButton from "@material-ui/core/IconButton";

const useStyles = makeStyles((theme) => ({
  root: {
    width: "100%",
    maxWidth: 360,
    backgroundColor: theme.palette.background.paper
  }
}));

export default function SelectedListItem() {
  const classes = useStyles();
  const [selectedIndex, setSelectedIndex] = React.useState(1);

  const handleListItemClick = (event, index) => {
    setSelectedIndex(index);
  };

  return (
    <div className={classes.root}>
      <List component="nav" aria-label="main mailbox folders">
        <ListItem
          button
          selected={selectedIndex === 0}
          onClick={(event) => handleListItemClick(event, 0)}
        >
          <ListItemIcon>
            <IconButton edge="end" aria-label="delete">
              <DeleteIcon />
            </IconButton>
          </ListItemIcon>
          <ListItemText primary="Inbox" />
          <ListItemSecondaryAction>
            <IconButton edge="end" aria-label="delete">
              <DeleteIcon />
            </IconButton>
          </ListItemSecondaryAction>
        </ListItem>
        <ListItem
          button
          selected={selectedIndex === 1}
          onClick={(event) => handleListItemClick(event, 1)}
        >
          <ListItemIcon>
            <IconButton edge="end" aria-label="delete">
              <DeleteIcon />
            </IconButton>
          </ListItemIcon>
          <ListItemText primary="Drafts" />
          <ListItemSecondaryAction>
            <IconButton edge="end" aria-label="delete">
              <DeleteIcon />
            </IconButton>
          </ListItemSecondaryAction>
        </ListItem>
      </List>
    </div>
  );
}

我認為這是因為它是用來給按鈕添加次要動作的，所以當你點擊次要動作區域時，它會阻止主要動作的發生。所以在你的例子中，當你點擊右圖標時，它包含了ListItemSecondaryAction區域內的漣漪效應。如果你想在列表中禁用ripple，你可以在你的列表中添加屬性“disable ripple ”,它將被禁用，但是如果你想有條件的話。當用戶點擊圖標時，波紋應該只出現在圖標上，如果點擊按鈕，你可以嘗試在點擊按鈕時停止傳播(可能不起作用)，但你可以試試。

我創建了一個與你共享代碼沙盒鏈接的工作

https://codesandbox.io/s/material-demo-forked-i7k7e?文件=/demo.js

<ListItem
          button
          disableRipple
          selected={selectedIndex === 0}
          onClick={(event) => handleListItemClick(event, 0)}
          style={{ position: "relative" }}
        >
          <div style={{ zIndex: 1 }}>
            <ListItemIcon>
              <IconButton edge="end" aria-label="delete">
                <DeleteIcon />
              </IconButton>
            </ListItemIcon>
            <ListItemText primary="Inbox" />
            <ListItemSecondaryAction>
              <IconButton edge="end" aria-label="delete">
                <DeleteIcon />
              </IconButton>
            </ListItemSecondaryAction>
          </div>
          <ButtonBase
            style={{
              position: "absolute",
              bottom: 0,
              top: 0,
              left: 0,
              right: 0,
              width: "100%",
              zIndex: 0
            }}
          />
        </ListItem>