如何修改MUI Tooltip背景色？解决自定义样式后的边框问题

问题根源是你在内部的Typography组件中设置背景色，和MUI Tooltip自带的默认容器样式（包含边框/阴影）叠加，导致出现多余边框。正确做法是直接通过Tooltip的sx属性覆盖它的默认容器样式：

export default function HoverTip({ tip }) {
  return (
    <Tooltip 
      title={<Typography fontSize={15}>{tip}</Typography>}     
      arrow 
      placement="right"
      sx={{
        // 覆盖Tooltip容器的默认样式
        '& .MuiTooltip-tooltip': {
          backgroundColor: '#ffffff',
          color: '#514E6A',
          fontSize: '15px',
          border: 'none', // 移除默认灰色边框
          boxShadow: 'none' // 若有默认阴影也一并移除
        },
        // 让箭头颜色和背景一致
        '& .MuiTooltip-arrow': {
          color: '#ffffff'
        }
      }}
    >
      <IconButton>
        <HelpOutlineIcon />
      </IconButton>
    </Tooltip>
  )
}

关键修改说明：

• 把背景、文字颜色的样式从Typography转移到Tooltip的容器样式中，避免样式冲突
• 通过border: none明确移除Tooltip自带的边框
• 同步设置箭头颜色与背景色一致，保证视觉统一
• 字号可以在Typography或Tooltip容器样式中设置，选一种即可

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