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组件。

样式化的组件未包装其他样式化的组件

1 个答案: