将样式化组件添加到通常的类包装器之外并通过 ajax 调用的引导模式

Question

我正在使用 Bootstrap 模态并构建反应组件以及传递样式组件。 我面临的问题是模式通过 ajax 附加到 dom 并驻留在我正在构建的导出样式组件包装器之外。

这是我的反应的一部分：

  import { ModalWrapper } from './ModalStyles';
  ...
  return (
      <>
        <ButtonSecondary
          onClick={handleShow}
          title={buttonText}
          route="/"
          brand={props.brand}
        >
        </ButtonSecondary>

        <ModalWrapper> // this does not exist as the container has not yet been called by the ajax method
          <Modal
          show={show}
          onHide={handleClose}
          >
            <Modal.Header>
              <Modal.Title>{title}</Modal.Title>
            </Modal.Header>
            <Modal.Body>
              <p>{message}</p>
            </Modal.Body>

            <Modal.Footer>
              <ButtonPrimary
                onClick={handleClose}
              >
              </ButtonPrimary>
              <ButtonSecondary
                onClick={handleClose}
              >
              </ButtonSecondary>
            </Modal.Footer>
        </Modal>
      </ModalWrapper>
    </>
  );

我的样式组件：

export const ModalWrapper = styled.div`
  ${modalStyles};
  
  .modal-header {
    ${mixins.borderRadiusNone};
    background-color: ${colors.baseBlue};
    color: ${colors.white};
  }
`;

作为临时措施，我将<ModalWrapper>更改为<InnerModalWrapper>并将其放入模态。 这适用于模态内容下的任何子属性。 但是我仍然想访问这个元素的父类的类属性。

是否可以只在样式组件中使用类名？ 是否需要将所有内容导出为包装器。 我正在从 sass 迁移。 我也猜测人们不会混合样式组件和 sass。 我正在考虑如何使用全局样式，我不想或不需要为所有内容编写样式组件。 他们应该是一些基础继承。

Answer 1

嗯，这有点痛苦，但我有一些通过全局样式工作的东西。

但是在此之前，我尝试将包装器的类名传递到 Modal div 中，如下所示：

<Modal className={ModalWrapper.toString().replace('.','')}

这会将第一个类名传递给包装器（并删除前面的点），但是这个类名似乎是固定的，而传递给包装器的第二个类名似乎是动态的（在后续构建中更改，并且我想访问的那个）。

所以这个方法失败了。 在这种情况下， iyPhHa 。

所以我刚刚创建了一个 globalStyles 文件并将我所有的模态样式转储到那里。 这也感觉有点笨拙，但它有效并且将样式保留在主 dom 之外。 它是这样的（如果有人读到这个，我会感到惊讶）。

const GlobalStyles = styled.div`
   .custom-modal {
      border-radius: 0 // bootstrap overrides etc.
   }
`;