带TypeScript的样式化组件.attrs

我对如何在TypeScript中使用.attrs()函数感到有些困惑。说我有以下内容;

BottleBar.tsx:

interface IBottleComponentProps {
  fill?: boolean
}

const BottleComponent = styled.div.attrs<IBottleComponentProps>(({fill}) => ({
  style: {
    backgroundImage: `url("./media/images/${fill ? 'Bottle-Filled.png' : 'Bottle-Empty.png'")`
  }
}))<IBottleComponentProps`
  width: 20px;
  height: 20px;
`;

export default function BottleBar() {

  return (
    <Wrapper>
      <BottleComponent />
      <BottleComponent fill />
    </Wrapper>
  )
}

现在,以上代码可以正常工作,但是我不确定为什么在开始和结束时都需要两次使用IBottleComponentProps-如果没有它,我将得到以下信息:

Type '{ fill: boolean; }' is not assignable to type 'IntrinsicAttributes & Pick<Pick<Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "slot" | ... 253 more ... | "onTransitionEndCapture"> & { ...; }, "slot" | ... 254 more ... | "onTransitionEndCapture"> & Partial<...>, "slot" | ... 254 more ... | "onTransitionEndCapture"> & { ...; } & { ...; }'.

另外,在第一个代码示例中,我得到了这样的浏览器日志;

index.js:1 Warning: Received `true` for a non-boolean attribute `fill`.

老实说,这非常令人困惑,并且在这方面,“样式化组件”文档也不是很清楚。 向正确方向的推动将不胜感激。

评论