添加溢出属性时，材质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属性，用于简单模式：

  

请注意，您可以使用outline: 0 CSS属性禁用轮廓（通常是蓝色或金色）。

首先需要添加到当前样式：

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>
</>

通过添加和删除值为outline的{​​{1}}属性的结果：

如果您不想为此目的而使用0，我想使用样式化的组件只需用Container创建样式化的opacity: 0。

那为我解决了这个问题。

希望对您有帮助！