如何在Material UI v4中实现更大的Tooltip箭头？

Material UI v4的Tooltip箭头是通过伪元素实现的，你可以通过**自定义CSS样式覆盖默认伪元素的border-width**来放大箭头，和react-tooltip的思路一致，具体实现如下：

• 使用MUI的makeStyles或withStyles创建自定义样式，针对Tooltip的箭头元素进行修改：

  import { makeStyles, Tooltip } from '@material-ui/core';
  
  const useStyles = makeStyles({
    customTooltip: {
      '& .MuiTooltip-arrow': {
        '&::before': {
          borderWidth: '10px', // 替换为你需要的箭头尺寸，默认通常是6px
        },
      },
      // 可选：箭头放大后可能需要适配内容内边距，避免错位
      '& .MuiTooltip-tooltip': {
        padding: '8px 12px',
      },
    },
  });
  
  // 组件使用示例
  function BigArrowTooltip() {
    const classes = useStyles();
    return (
      <Tooltip
        title="带大箭头的提示文本"
        arrow
        classes={{ tooltip: classes.customTooltip }}
      >
        <button>鼠标悬停查看</button>
      </Tooltip>
    );
  }
  

• 额外注意点：

  • 必须给Tooltip组件添加arrow属性，才会渲染箭头元素
  • 若箭头放大后出现位置偏移，可通过调整Tooltip的margin或内容内边距修正
  • 如需针对特定方向（上/下/左/右）的箭头单独调整，可通过方向类定位：

    const useStyles = makeStyles({
      customTooltip: {
        // 仅调整向上的Tooltip箭头
        '& .MuiTooltip-popper[x-placement^="top"] .MuiTooltip-arrow::before': {
          borderWidth: '10px 10px 0 10px',
        },
        // 仅调整向右的Tooltip箭头
        '& .MuiTooltip-popper[x-placement^="right"] .MuiTooltip-arrow::before': {
          borderWidth: '10px 10px 10px 0',
        },
      },
    });
    

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