如何自定义Material-UI Popover形状：添加指针三角并调整位置

我来帮你搞定这个需求！要给Popover加上指向锚点的小三角，同时让它和锚点盒子保持一定间距，咱们可以通过CSS伪元素实现三角，再通过调整样式属性或者Popover的定位参数来控制间距，具体实现如下：

1. 添加三角指针 #

我们可以利用paper类的伪元素（:before/:after）来绘制三角，同时让三角带上和Popover一致的阴影效果（视觉更统一）。修改你的withStyles配置：

const Popover = withStyles((theme) => ({
  root: {},
  paper: {
    backgroundColor: '#e02020',
    boxShadow: '0 20px 15px -20px rgba(0, 0, 0, 0.15)',
    borderRadius: theme.spacing(1),
    padding: theme.spacing(2),
    // 关键：给paper设置相对定位，让伪元素可以基于它定位
    position: 'relative',
    // 给三角留出位置，避免内容被三角遮挡
    paddingTop: theme.spacing(3),

    // 绘制三角的阴影层
    '&:before': {
      content: '""',
      position: 'absolute',
      top: -8,
      left: '50%',
      transform: 'translateX(-50%)',
      width: 0,
      height: 0,
      borderLeft: '8px solid transparent',
      borderRight: '8px solid transparent',
      borderBottom: '8px solid rgba(0, 0, 0, 0.15)', // 和boxShadow的阴影颜色一致
    },
    // 绘制三角的背景层（覆盖阴影层，形成带阴影的三角）
    '&:after': {
      content: '""',
      position: 'absolute',
      top: -7,
      left: '50%',
      transform: 'translateX(-50%)',
      width: 0,
      height: 0,
      borderLeft: '7px solid transparent',
      borderRight: '7px solid transparent',
      borderBottom: '7px solid #e02020', // 和paper背景色一致
    },
  },
}))(MuiPopover);

这里的思路是：

• 用两个伪元素叠加，一个做阴影，一个做主体颜色，模拟带阴影的三角
• 通过top、left和transform: translateX(-50%)把三角定位在Popover顶部居中的位置
• 给paper加paddingTop，避免Popover内的文字和三角重叠

2. 调整Popover与锚点的间距 #

有两种方式可以实现间距调整：

方式一：修改Popover的定位参数 #

你可以通过anchorOffset属性来设置Popover相对于锚点的偏移量，这是Material-UI官方提供的定位调整方式，兼容性更好：

<Popover
  id="tofield"
  open={openTo}
  anchorEl={divToRef.current}
  onClose={handleClose}
  anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
  transformOrigin={{ vertical: 'top', horizontal: 'center' }}
  anchorOffset={{ y: 8 }} // 让Popover在锚点下方再偏移8px
>
  <Typography className={classes.popoverText}> Please enter destination </Typography>
</Popover>

方式二：通过CSS margin调整 #

直接在paper的样式里添加marginTop，也能快速拉开间距：

paper: {
  // 其他样式...
  marginTop: theme.spacing(1), // 添加上外边距，和锚点拉开距离
}

两种方式选一种即可，根据你的布局需求灵活调整数值。

完整修改后的代码参考 #

把上面的调整整合到你的代码里，最终的Popover配置和样式大概是这样：

// 样式部分
const Popover = withStyles((theme) => ({
  root: {},
  paper: {
    backgroundColor: '#e02020',
    boxShadow: '0 20px 15px -20px rgba(0, 0, 0, 0.15)',
    borderRadius: theme.spacing(1),
    padding: theme.spacing(2),
    position: 'relative',
    paddingTop: theme.spacing(3),

    '&:before': {
      content: '""',
      position: 'absolute',
      top: -8,
      left: '50%',
      transform: 'translateX(-50%)',
      width: 0,
      height: 0,
      borderLeft: '8px solid transparent',
      borderRight: '8px solid transparent',
      borderBottom: '8px solid rgba(0, 0, 0, 0.15)',
    },
    '&:after': {
      content: '""',
      position: 'absolute',
      top: -7,
      left: '50%',
      transform: 'translateX(-50%)',
      width: 0,
      height: 0,
      borderLeft: '7px solid transparent',
      borderRight: '7px solid transparent',
      borderBottom: '7px solid #e02020',
    },
  },
}))(MuiPopover);

// 组件调用部分
<Grid item xs={12} sm={3} ref={divToRef}> 
  <Box pl={2} pt={1}> 
    <Typography className={classes.weight} variant="caption" color="textSecondary"> 
      {t('search to').toUpperCase()} 
    </Typography> 
  </Box> 
  <Box pl={1}> 
    <AutoCompleteInput {/* some codes here */} /> 
  </Box> 
  <Popover 
    id="tofield" 
    open={openTo} 
    anchorEl={divToRef.current} 
    onClose={handleClose} 
    anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }} 
    transformOrigin={{ vertical: 'top', horizontal: 'center' }}
    anchorOffset={{ y: 8 }} // 用官方方式调整间距
  > 
    <Typography className={classes.popoverText}> Please enter destination </Typography> 
  </Popover> 
</Grid>

这样就能实现带三角指针、且和锚点有间距的Popover啦！

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