javascript - 添加overflow属性时Material UI奇怪的蓝线

Question

我在我的 React 应用程序中使用 Material-UI。我也在使用样式化组件，并且在 Chrome 浏览器中查看该应用程序。使用 Firefox 浏览器时不会出现我遇到的问题。

在我的样式组件中应用 overflow 属性时，我看到这条蓝线朝向模态底部。这仅在我调整浏览器窗口大小时出现。当我逐渐将浏览器窗口拉近正常大小时，这条线就消失了。我不确定这是为什么，也不知道我能做些什么来解决它。

这是我的代码片段:

export const ScrollableModal = styled(MUIModal)(() => ({
  overflow: 'scroll',
}));

const Modal = ({ title, children, actionsLeft, actionsRight, ...rest }) => {
  const wrappedTitle =
    typeof title === 'string' ? <Typography>{title}</Typography> : title;

  return (
    <ScrollableModal {...rest}>
      <Container>

我已将其余部分排除在外，因为它与我的问题无关。

这是我所描述内容的屏幕截图:

Answer 1

我猜这就是他们在 documentation 中提到的 outline 属性对于简单模态:

Notice that you can disable the outline (often blue or gold) with the outline: 0 CSS property.

首先需要在当前样式中添加:

const useStyles = makeStyles({
  modal: {
    textAlign: 'center',
    width: '35vw',
    backgroundColor: 'white',
    opacity: 0.8,
    outline: 0, // add / remove
  }
});

然后它就可以应用在Container上，就像渲染中的下面这样:

const styles = useStyles();

return <>
  <Modal open={true}>
    <Container className={styles.modal}>
      <p>Simple Modal</p>
    </Container>
  </Modal>
</>

添加和删除值为 0 的 outline 属性的结果:

如果您不想为此目的使用 makeSTLyes，我想对于带样式的组件，只需创建一个带有 opacity: 0 的带样式的 Container .

这为我解决了问题。

希望对您有所帮助!