Styled component not wrapping another styled component

Question

I have a Popup component like so:

import React, { useEffect } from 'react';
import styled from 'styled-components';

const Div = styled.div`
  position: absolute;
`;

const Popup = ({ isOpen, onClose, children }) => {

  useEffect(() => {
    const onClick = e => {
      if (isOpen && onClose) {
        onClose();
      }
    };

    document.addEventListener('click', onClick);
    return () => document.removeEventListener('click', onClick);
  }, [isOpen, onClose]);

  return <Div>
    {isOpen && children}
  </Div>;
};

export default Popup;

Now I'm trying to wrap it into another styled component:

const Menu = styled(Popup)`
  background-color: red;
`;

But using this Menu only applies the styles from the Popup, i.e. the background color stays white. Why isn't it changing to red?

Answer 1

You need to add className prop to Popup component in order to allow the css-in-js library (styled-component) to inject its styles:

const Popup = ({ isOpen, onClose, children, className }) => {
  //...
  return <Div className={className}>{isOpen && children}</Div>;
};

See Styling normal React components in Docs.