如何解决自定义Popover材质-UI形状
我正在使用弹出窗口,当前是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',}}>
<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.15)',borderRadius: theme.spacing(1),padding: theme.spacing(2),},}))(MuiPopover)
如何添加小三角形并调整弹出框的transformOrigin的位置(也许添加填充/边距)?
解决方法
您可以通过将其添加到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
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。