ReactJS 弹出屏幕不会占据 100% 的主体

Question

我有一个显示项目的子功能组件。我想在弹出屏幕上将项目添加到列表中。我添加了逻辑以使其 100% 但它不起作用。我正在使用样式组件。

我试过height: 100%; width: 100%

export const MainContainer = styled.div`
  height: 110vh;
  width: 110vw;

  /* padding: 20px 24px;
  opacity: 1;
  transform: translate(-20%, -62%);
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center; */
  
`;

执行“100vh or 100vw”保留大小为100vh（全屏高度）的空间，但仍显示在其他div组件之后。

我尝试使用 react-modal，但我无法设置样式。如果您知道如何自定义模态组件的样式。请告诉我。

Clicking Add item make this appear out of the propertion