javascript - React：如何将函数（“插值”）传递给样式化组件的模板

Question

我正在尝试使用反应构建条形图。我正在使用道具尝试将函数（“插值”）传递给样式组件中的样式组件模板，但它显示错误消息：

我的样式组件：

export const Bar = styled.div`
  border-radius: 3px;
  height: 55px;
  background-color: #64b2d1;
  width: ${props => props.width};
  animation-name: ${showBarOne};
  animation-duration: 1.2s;
  animation-delay: 0.1s;
  animation-fill-mode: forwards;
`;

我的组件：

const Volume = ({widthBar}) =>{

  return(
     <VolumeContainer>
       
        <ProgressContainer>
          <Bar width='{widthBar}' ></Bar>
        </ProgressContainer>
     </VolumeContainer>
   )
  }

它在宽度变量的 Volume 组件内显示错误。

没有重载匹配此调用。重载 1 of 2, '(props: Pick<Pick<Pick<DetailedHTMLProps<HTMLAttributes, HTMLDivElement>, "slot" | "style" | ... 252 更多 ... | "onTransitionEndCapture"> & { ...; } , "slot" | ... 254 更多 ... | "onTransitionEndCapture"> & Partial<...>, "slot" | ... 254 更多 ... | "onTransitionEndCapture"> & { ...; } & { ...; }): ReactElement<...>'，给出以下错误。输入'{宽度：字符串；}' 不可分配给类型 'IntrinsicAttributes & Pick<Pick<Pick<DetailedHTMLProps<HTMLAttributes, HTMLDivElement>, "slot" | ... 253 更多... | "onTransitionEndCapture"> & { ...; }, “插槽” | ... 254 更多... | “onTransitionEndCapture” > & 部分<...>, "槽" | ... 254 更多... | "onTransitionEndCapture"> & { ...; } & { ...; }'。

标签： javascriptreactjsstyled-components