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

Question

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

在我的样式化组件中应用溢出属性时，我看到这条蓝线朝向模式的底部。这仅在我使用浏览器窗口的大小时才会出现。随着我逐渐使浏览器窗口接近正常大小，这条线消失了。我不确定这是为什么，或者我可以做些什么来解决它。

这是我的代码的 sn-p：

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

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

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

这为我解决了问题。

希望对你有帮助！