將樣式化組件添加到通常的類包裝器之外並通過 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.
   }
`;