自定义popover材质-ui形状

Question

我正在使用弹出框，目前是plain rectangle which sits right below the box。我想添加像指针这样的小三角形，让它看起来更漂亮，并且可能会添加边距或填充顶部，这样它就会比盒子稍微低一点，就像this。

这就是我所说的弹出框

 <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',
                          }}>
     <Typography className={classes.popoverText}>
       Please enter destination
     </Typography>
   </Popover>
 </Grid>

我用 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),
  },
}))(MuiPopover)

如何添加小三角形并调整popover的transformOrigin的位置（可能添加填充/边距）？

Answer 1

您可以通过将其添加到 CSS 中来做到这一点：

.tooltip-top::before {
  content: '';
  position: absolute;
  display: block;    
  width: 0px;        
  left: 50%;
  top: 0;
  border: 15px solid transparent;
  border-top: 0;
  border-bottom: 15px solid #5494db;
  transform: translate(-50%, calc(-100% - 5px));
}

您可以使用这些字段来自定义箭头的位置、宽度以及箭头的高度。看看这个CodePen