反应模态组件接收相同的类

Question

我有一个我制作的反应模态组件。我可以传递一个使其全屏显示或定义宽度的道具。一切正常，但是当第一个模式打开时，我遇到了重用它的问题。第二个组件采用与第一个相同的类，因此它使最大宽度为 100%。

例如，我想要一个全屏模态，并在我单击链接时以 50% 的大小在顶部显示第二个模态。

我正在使用样式化组件，我认为这可能是出现问题的地方。我只是不知道如何处理它。

模态组件：

<ModalContainer visible={visible} fullScreen={fullScreen}>
    <ModalDialog role="dialog" width={width}>
       <ModalBody>{children}</ModalBody>
    </ModalDialog>
</ModalContainer>

样式

export const ModalDialog = styled.div`
  width: 100%;
  max-width: ${({ width }) => width};
`;


export const ModalContainer = styled.div`
  visibility: hidden;
  opacity: 0;
  display: none;

  ${({ visible }) =>
    visible &&
    css`
      visibility: visible;
      opacity: 1;
      display: flex;
    `}

   ${({ fullScreen }) =>
    fullScreen &&
    css`
      width: 100vw;
      height: 100vh;
      overflow: none;

      ${ModalDialog} {
        box-shadow: none;
        max-width: 100%;
      }
   
    `}
`}

对话框的第一个模态的类也被用于第二个，即使它没有全屏道具。