使用样式化组件对通用组件进行样式化

Question

当我尝试像下面这样设置通用组件的样式时，遇到了烦人的打字稿错误：

const StyledParentComponent = styled(ParentComponent)`
  ${GenericComponent} {
    ...
  }
`;

它抛出了一堆关于 JSX 无法分配给某些插值类型的错误。

这是一个产生错误的小例子：

import styled from "styled-components";

const ParentComponent = () => {
  return (
    <ParentComponentContainer>
      <GenericComponent value={10} />
    </ParentComponentContainer>
  );
};

interface GenericComponentProps<T> {
  value: T;
  className?: string;
}

const GenericComponent = <T,>({
  value,
  className,
}: GenericComponentProps<T>) => {
  console.log(value);

  return (
    <GenericComponentContainer>
      Logging generic component value
    </GenericComponentContainer>
  );
};

const GenericComponentContainer = styled.div``;

const RegularComponent = () => {
  return <RegularContainer></RegularContainer>;
};

const RegularContainer = styled.div``;

const ParentComponentContainer = styled.div` 
  // this is where it will throw the error
  ${GenericComponent} {
    display: flex;
  }

  ${RegularContainer} {
    display: flex;
  }
`;

我正在运行处理这个问题的标准模式。重要的是，我能够以这种方式设置它的样式，以便我可以将通用组件作为子组件，并能够使用上述模式设置它们的样式。

Answer 1

我认为在

styled.div()

中使用React组件是非常不寻常的。 我以前从未见过这样做。我们试试这个方法怎么样？

首先，将 className 属性转发到

GenericComponentContainer

。

const GenericComponent = <T,>({
  value,
  className,
}: GenericComponentProps<T>) => {
  console.log(value);

  return (
    // Must forward the `className` prop!
    <GenericComponentContainer className={className}>
      Logging generic component value
    </GenericComponentContainer>
  );
};

const GenericComponentContainer = styled.div``;

然后，用 styled 造型

GenericComponent

。

const ParentComponentContainer = styled.div` 
  ${RegularContainer} {
    display: flex;
  }
`;

const StyledGenericComponent = styled(GenericComponent)`
   display: flex;
`;