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

Posted 2023-02-22

【中文标题】添加溢出属性时材质UI奇怪的蓝线

【英文标题】：Material UI strange blue line when overflow attribute is added

【发布时间】：2020-03-21 07:40:35

【问题描述】：

我在我的 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>

其余的我都省略了，因为它与我的问题无关。

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

【参考方案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。

这为我解决了问题。

希望对你有帮助！

【讨论】：

感谢@norbitrial 的回复。我接受了您的建议并将其实施到我的样式组件中。但是，蓝色轮廓仍然显示在 chrome 浏览器中。我试过设置outline: 'none' 和outline: 0。没有成功

我也试过'& focus': outline: 'none !important', ,。仍然没有摆脱它

您是否尝试仅在Modal 或Container 上申请？您也可以尝试使用makeStyles 或从纯CSS 中添加outline: 0 吗？如果您还没有尝试过，我认为这些值得一试。告诉我进展如何，谢谢！

好的，感谢您的帮助。我将它应用于容器。不幸的是，在我们正在进行的项目中，我们只能使用样式化的组件，所以 makeStyles 不是一个选项 :( 。当我回到应用程序时，我会看看。我认为它还有更多工作要做在某些浏览器中具有焦点、咏叹调和可访问性。

谢谢 - 我犯了一个错误，将样式应用于模态而不是其子容器