Can't customize background of a Tooltip popup?

Following various examples from searching around, I've tried multiple approaches to apply customization to the body of the the MUI tooltip component popup (background color, font sizing, etc.)with no success (except for the popup width). Here's my latest try:

import {FC} from "react";
import Tooltip from '@mui/material/Tooltip';
import {IconButton} from "@mui/material/";
import InfoRoundedIcon from '@mui/icons-material/InfoRounded';
import {makeStyles} from "@mui/styles";

interface IFieldTooltip {
    info: string
}

const FieldTooltip: FC<IFieldTooltip> = ({info}) => {

    const useStyles = makeStyles(theme => ({
        customTooltip: {
            backgroundColor: 'rgba(220, 0, 78, 0.8)',
            minWidth: "200px",
            fontSize: "larger"     
        },
        customArrow: {
            color: 'rgba(220, 0, 78, 0.8)',
        },
    }));

    return (
        <>
            <Tooltip
                title="Test Me!"
                classes={{
                    tooltip: classes.customTooltip,
                    arrow: classes.customArrow
                }}
                arrow
            >
                <IconButton>
                    <InfoRoundedIcon sx={{color: '#1C549B'}} />
                </IconButton>
            </Tooltip>
        </>
    )
}

I've also attempted inline approach using sx syntax, but the results are the same... I can't change the background color of the popup or make any other style modifications.
I'm assuming I must be targeting the properties incorrectly, but this is how I interpreted the examples I've found for doing this.

Solution 1:

I think you need to change your usage of the useStyles function:

import { makeStyles } from '@mui/styles';

const useStyles= makeStyles({
  t: {
    color: 'red',
    background:'green'
  }
})
export default function BasicTooltip() {
  const classes = useStyles()
  return (
    <Tooltip title="Delete" classes={{tooltip: classes.t}}>
      <IconButton>
        <DeleteIcon />
      </IconButton>
    </Tooltip>
  );
}

Here is a Link.