我想将 mui Tooltip 的背景颜色设置为红色，文本颜色设置为白色

Question

`<Tooltip
        placement="left"
        classes={{
          tooltip: "classes.customTooltip",
          arrow: "classes.customArrow",
        }}
        title="Reverse POS Update"
        arrow
      >
        <IconButton aria-label="edit" onClick={() => handleEdit(params.id)}>
          <SyncAltRoundedIcon className="reversebtn" />
        </IconButton>
      </Tooltip>`    

我正在使用 Datagrid，在我使用的列之一中使用图标而不是按钮，我在悬停时应用了 mui 工具提示，我的图标是红色的，我也希望我的工具提示是红色的。

{ field: "TickToDelete", headerName: "Delete", width: 70, sortable: true, renderCell: (params) => { return ( <Tooltip title="Delete" placement="right"> <IconButton aria-label="edit" onClick={() => handleEdit(params.id)}> <DeleteIcon /> </IconButton> </Tooltip> ); }, },

Answer 1

在MUI5中，您可以自定义<Tooltip/>使用的样式componentsProps。检查下面的例子

<Tooltip
  title="Delete"
  open={true}
  componentsProps={{
    tooltip: {
      sx: {
        bgcolor: "red",
        color: "white"
      }
    }
  }}
>