样式化组件不包装另一个样式化组件

Question

我有一个像这样的Popup组件：

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;

现在我试图将它包装到另一个样式组件中：

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

但使用此Menu仅适用于Popup中的 styles，即背景颜色保持白色。 为什么不变成红色？

Answer 1

您需要将className属性添加到Popup组件，以允许 css-in-js 库（ styled-component ）注入其 styles：

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

请参阅在Docs中设置普通 React 组件的样式。