javascript - React: How to pass a function ("interpolations") to a styled component's template

Question

I'm trying to build a bar graph using react. I'm using props to try to pass a function ("interpolations") to a styled component's template in styled component but its showing an error message:

my styled-component:

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;
`;

my component:

const Volume = ({widthBar}) =>{

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

its showing a error inside the Volume component on the width variable.

No overload matches this call. Overload 1 of 2, '(props: Pick<Pick<Pick<DetailedHTMLProps<HTMLAttributes, HTMLDivElement>, "slot" | "style" | ... 252 more ... | "onTransitionEndCapture"> & { ...; }, "slot" | ... 254 more ... | "onTransitionEndCapture"> & Partial<...>, "slot" | ... 254 more ... | "onTransitionEndCapture"> & { ...; } & { ...; }): ReactElement<...>', gave the following error. Type '{ width: string; }' is not assignable to type 'IntrinsicAttributes & Pick<Pick<Pick<DetailedHTMLProps<HTMLAttributes, HTMLDivElement>, "slot" | ... 253 more ... | "onTransitionEndCapture"> & { ...; }, "slot" | ... 254 more ... | "onTransitionEndCapture"> & Partial<...>, "slot" | ... 254 more ... | "onTransitionEndCapture"> & { ...; } & { ...; }'.

question from:https://stackoverflow.com/questions/65893178/react-how-to-pass-a-function-interpolations-to-a-styled-components-templat

Answer 1

Waitting for answers