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

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 的样式，即背景颜色保持白色。为什么不变成红色？

Answer 1

您需要将 className 属性添加到 Popup 组件以允许 css-in-js 库 (styled-component) 注入其样式：

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

请参阅Docs 中的样式化普通 React 组件。