时间戳

首页 > 解决方案 > 如何在材质 UI Modal 上设置 BorderRadius 属性

reactjs - 如何在材质 UI Modal 上设置 BorderRadius 属性

问题描述

这应该围绕我的 Material UI 模态：

const useStyles = makeStyles((theme) => ({
  loginModal: {
    position: 'absolute',
    margin: 'auto',
    top: '0',
    bottom: '0',
    left: '0',
    right: '0',
    width: '40%',
    height: '70%',
    overflowY: 'none',
    outline: 'none',
    borderRadius: 25
}));

// ...omited

return (
<Modal
  className={classes.modalClassContainer}
  open={open}
  onClose={close}
  closeAfterTransition
  BackdropComponent={Backdrop}
  BackdropProps={{
    timeout: 600,
  }}>
    <Fade in={open}>
      <div className={classes.loginModal}>
        {childBody}
      </div>
    </Fade>
 </Modal>
)

在这种情况下，一切似乎都正常，但边框仍然显示不圆。如何添加圆形边框？

标签： reactjsmaterial-ui

解决方案

borderRadius应该是一个有长度单位的字符串。试试borderRadius: '25px'。

编辑：不要相信我。正如 NearHuscarl 指出的那样，默认情况下25将转换为'25px'. OP 的问题是，他将样式添加到了错误的元素中。

推荐阅读