Adding styled component to bootstrap modal which is outside of usual class wrapper and called via ajax

Question

I am working with Bootstrap modals and building a react component as well as passing styled components. The issue I am facing is that the modal is appended to the dom via ajax and resides outside of the exported styled component wrapper I am building.

Here is part of my react:

  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>
    </>
  );

My styled component:

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

As as interim measure I changed <ModalWrapper> to <InnerModalWrapper> and put it inside the modal. This works for any child property below the modal-content. However I still want to access class properties on the parents of this element.

Is it possible to just use classnames in styled-components? Does everything need to be exported as a wrapper. I am migrating from sass. I am also guessing people don't mix styled components and sass. I am thinking about how we want to use global styles, I don't want or need to write a styled component for everything. Their should be some base inheritance.

Answer 1

Well it was a bit of an ache but I have something working via global styles.

However before that I tried to pass the class name of the wrapper into the Modal div like so:

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

This passes the first class name to the wrapper (and removes the preceding dot) however this class name appears to be fixed, whereas the second class name passed to the wrapper seems to be the dynamic one (which is changed in subsequent builds and which is the one I want to access).

So this method failed. iyPhHa in this instance.

So I just created a globalStyles file and dumped all my modal styles in there. This also feels a bit clunky, but it works and it keeps the styles outside of the main dom. It was something like this (I would be amazed if anybody reads this).

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