如何设置MUI Tooltip背景为红色、文字为白色？含DataGrid场景

以下是几种适配DataGrid场景的实现方案，可根据你使用的MUI版本选择：

方案一：使用makeStyles（MUI v4） #

先定义自定义样式钩子，再在Tooltip组件中引用：

import { makeStyles } from '@material-ui/core/styles';
import Tooltip from '@material-ui/core/Tooltip';
import IconButton from '@material-ui/core/IconButton';
import DeleteIcon from '@material-ui/icons/Delete';

// 定义样式
const useStyles = makeStyles({
  customTooltip: {
    backgroundColor: '#ff0000', // 红色背景
    color: '#ffffff', // 白色文字
  },
  customArrow: {
    color: '#ff0000', // 箭头与背景色统一
  },
});

// 在DataGrid中使用
const YourComponent = () => {
  const classes = useStyles();

  const handleEdit = (id) => {
    // 你的编辑/删除逻辑
  };

  return (
    <DataGrid
      columns={[
        {
          field: "TickToDelete",
          headerName: "Delete",
          width: 70,
          sortable: true,
          renderCell: (params) => {
            return (
              <Tooltip
                title="Delete"
                placement="right"
                classes={{
                  tooltip: classes.customTooltip,
                  arrow: classes.customArrow
                }}
                arrow
              >
                <IconButton aria-label="delete" onClick={() => handleEdit(params.id)}>
                  <DeleteIcon className="reversebtn" />
                </IconButton>
              </Tooltip>
            );
          },
        },
        // 其他列配置
      ]}
      // DataGrid的其他属性
    />
  );
};

方案二：使用sx属性（MUI v5，推荐） #

无需额外定义样式，直接通过sx属性内联修改Tooltip样式，更简洁：

import Tooltip from '@mui/material/Tooltip';
import IconButton from '@mui/material/IconButton';
import DeleteIcon from '@mui/icons-material/Delete';

// 在DataGrid的renderCell中直接使用
const columns = [
  {
    field: "TickToDelete",
    headerName: "Delete",
    width: 70,
    sortable: true,
    renderCell: (params) => {
      return (
        <Tooltip
          title="Delete"
          placement="right"
          arrow
          sx={{
            '& .MuiTooltip-tooltip': {
              backgroundColor: 'red',
              color: 'white',
            },
            '& .MuiTooltip-arrow': {
              color: 'red',
            }
          }}
        >
          <IconButton aria-label="delete" onClick={() => handleEdit(params.id)}>
            <DeleteIcon className="reversebtn" />
          </IconButton>
        </Tooltip>
      );
    },
  },
  // 其他列
];

方案三：封装自定义Styled Tooltip（MUI v5，适合复用） #

如果多个地方需要使用同款红色Tooltip，可以封装成自定义组件：

import { styled } from '@mui/material/styles';
import Tooltip from '@mui/material/Tooltip';

// 封装红色Tooltip组件
const RedTooltip = styled(Tooltip)(({ theme }) => ({
  '& .MuiTooltip-tooltip': {
    backgroundColor: 'red',
    color: 'white',
  },
  '& .MuiTooltip-arrow': {
    color: 'red',
  },
}));

// 在DataGrid中使用
renderCell: (params) => {
  return (
    <RedTooltip title="Delete" placement="right" arrow>
      <IconButton aria-label="delete" onClick={() => handleEdit(params.id)}>
        <DeleteIcon className="reversebtn" />
      </IconButton>
    </RedTooltip>
  );
}

注意事项 #

• 若启用了Tooltip的箭头（arrow属性），务必同步修改箭头颜色，保证视觉一致性
• 文字使用白色是为了和红色背景形成足够对比度，提升可读性

内容的提问来源于stack exchange，提问作者Anurag Pal