How to use props in translateX() in styled-components?

Here is my style-components code

const SlideBox = styled.div`
  display: flex;
  width: ${({ images }) => images.length * 798}px;
  transform: translateX(
    ${({ imgNo }) => {
      console.log(imgNo);
      return imgNo * -798;
    }}px
  );
  transition: all 300ms ease 0s;
  position: relative;
  margin: auto;
`;

In this code

  transform: translateX(
    ${({ imgNo }) => {
      console.log(imgNo);
      return imgNo * -798;
    }}px
  );

I try to use props in translateX() but It doesn't work. console.log(imgNo) is undifined. How can I use props in translateX? imgNo is props. It's just number.



Read more here: https://stackoverflow.com/questions/68468547/how-to-use-props-in-translatex-in-styled-components

Content Attribution

This content was originally published by Jay Lee at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: