javascript - Dòng màu xanh kỳ lạ của Material UI khi thêm thuộc tính overflow

Tôi đang sử dụng Material-UI với ứng dụng React của mình. Tôi cũng đang sử dụng styled components và tôi đang xem ứng dụng trên trình duyệt Chrome. Vấn đề tôi gặp phải không xảy ra khi sử dụng trình duyệt Firefox.

Khi áp dụng thuộc tính overflow trong component được styled của tôi, tôi thấy một đường màu xanh ở phía dưới của modal. Điều này chỉ xuất hiện khi tôi thay đổi kích thước cửa sổ trình duyệt của mình. Khi tôi dần dần đưa cửa sổ trình duyệt về kích thước bình thường, đường này biến mất. Tôi không chắc tại sao lại như vậy hoặc tôi có thể làm gì để khắc phục nó.

Đây là một đoạn mã của tôi:

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>

Tôi đã bỏ phần còn lại vì nó không liên quan đến câu hỏi của tôi.

Đây là một ảnh chụp màn hình của những gì tôi đang mô tả:

Câu trả lời #1

Tôi đoán đó là thuộc tính outline mà họ đã đề cập trong tài liệu cho modal đơn giản:

Lưu ý rằng bạn có thể tắt viền ngoài (thường là màu xanh dương hoặc vàng) bằng thuộc tính CSS outline: 0.

Trước tiên cần được thêm vào kiểu hiện tại:

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

Sau đó, nó có thể được áp dụng trên Container giống như sau trong phần render:

const styles = useStyles();

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

Kết quả khi thêm và xóa thuộc tính outline với giá trị 0:

Tôi đoán với styled components chỉ cần tạo một Container được styled với opacity: 0 nếu bạn không muốn sử dụng makeStyles cho mục đích này.

Điều đó đã giải quyết vấn đề cho tôi.

Tôi hy vọng điều đó sẽ giúp ích!