[SOLVED] I want to set the background color of my mui Tooltip to Red and text color to White

I want to set the background color of my mui Tooltip to Red and text color to White

`<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>`

I am Using Datagrid and in one of the column i used and icon instead of button and i apply a tooltip of mui on hover and my icon is of red color and i also want my tooltip to be red.

{ 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> ); }, },

Solution

In MUI5, You can customize styling of <Tooltip/> using componentsProps. Check the example below 👇

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