overlayClassName and styled-components not playing nicely

I’m running into a problem trying to encapsulate my Modal styles with styled-components. The following approach fails to work and the defaultProps() route is a no go as well. After looking at how react-modal generates the modal elements outside of the <App/> root in the DOM, it’s not surprising this is causing problems. It looks like buildClassName() is correctly adding the ‘modal-overlay’ className, yet even the second approach doesn’t work. I suspect styled-components doesn’t inject the CSS as it doesn’t see any of it’s children, or any of the <App/> children using it. Any ideas on how to get this to work to avoid using a global css class for the overlay?

const overlayClassName = 'modal-overlay'
const StyledModal = styled(Modal).attrs({
  overlayClassName
})`
  styles: here;

  &.${overlayClassName} {
    doesnt: work;
  }
  .${overlayClassName} {
    also-doesnt: work;
  }
`

[smagch]

I solved the problem without using .attrs().

function ReactModalAdapter ({ className, ...props }) {
  const contentClassName = `${className}__content`;
  const overlayClassName = `${className}__overlay`;
  return (
    <Modal
      portalClassName={className}
      className={contentClassName}
      overlayClassName={overlayClassName}
      {...props}
    />
  )
}

const StyledModal = styled(ReactModalAdapter)`

  &__overlay {
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-color: rgba(255, 255, 255, 0.75);
  }

  &__content {
    position: absolute;
    top: 40px;
    left: 40px;
    right: 40px;
    bottom: 40px;
    border: 1px solid #ccc;
    background: #fff;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    borderRadius: 4px;
    outline: none;
    padding: 20px;
  }
`;

[NathanielHill]

For anyone searching, I solved this using a wrapper function, assuggested by @exogen

function ReactModalAdapter ({ className, modalClassName, ...props }) {
  return (
    <ReactModal
      className={modalClassName}
      portalClassName={className}
      {...props}
    />
  )
}

const StyledModal = styled(ReactModalAdapter).attrs({
  overlayClassName: 'Overlay',
  modalClassName: 'Modal'
})`
  .Modal {
    styles: here;
  }
  .Overlay {
    styles: here;
  }
`