javascript - 样式化组件未包装另一个样式化组件

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)注入(inject)它的样式:

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

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