添加溢出属性时材质UI奇怪的蓝线

Question

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

在我的样式组件中应用溢出属性时，我看到这条蓝线指向模态底部。 这仅在我使用浏览器窗口的大小进行播放时出现。 当我逐渐使浏览器窗口接近正常大小时，线条消失了。 我不确定这是为什么，或者我能做些什么来解决它。

这是我的代码片段：

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

我想这就是他们在简单模态文档中提到的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>
</>

通过添加和删除值为0 outline属性的结果：

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

那为我解决了这个问题。

我希望这有帮助！