reactjsmaterial-uidatagridmui-x-data-grid

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"
          }
        }
      }}
    >