Typescript error - No overload matches this call-CodePudding

I'm trying to add typescript types to exist project. Progress is a number that define length to progressbar

interface ProgressProps {
  comp: JSX.Element;
  progress?: any;
}

export const Progress: React.FC<ProgressProps> = ({ progress }: any) => {
  return (
    <StyledProgressBlock progress={progress}>
      <span className="progress-line__value">{progress}%</span>
    </StyledProgressBlock>
  );
};

const StyledProgressBlock = styled.div`
  position: absolute;
  top: 0;
  width: ${props => props.progress && props.progress}%;
`;

I get error underlined this property: progress={progress} Please help to solve it and give the link to good explanation to solve this trouble in future.

CodePudding user response：

We need to specify type like this:

const StyledProgressBlock = styled.div<{ progress: number }>`
  position: absolute;
  top: 0;
  width: ${props => props.progress && props.progress}%;
`;