Concat prop value with string in styled-component

Question

Having trouble trying to add the 's' string to a prop passed in a styled-component. Also, I'm not entirely sure if i can just use prop.x in a styled component. Here's what i mean:

const MyComponent = (props) => {
  const StyledLineItem = styled.li`
    animation: ${someAnime};
    animation-delay: ${props.x}; // <- will this work?
// here i need to add the 's' to the end 
// but i can't use `` becaouse of the fact that styled components 
// are in a template tag already... at least i think that's why 
// i get errors when i try `${props.x}s`
// also, i haven't tested but will using ${prop.x} in a styled-component
// like this even work?
  `
  return (
    <StyledLineItem>{props.text}</StyledLineItem>
  )
}

// in my main component...

// ... react component stuff
  render() {
    return (
      <ul>
        {_.map(data, (item, i) => <MyComponent key={i} text={item.text})}
      </ul>
    )
  }

Let me know if i can be clearer on something.

Answer 1

Add "s" after variable would work fine.

`animation-delay: ${props.x}s`

code worth a thousand words

var x = .3;
var a = `animation-delay: ${x}s`;
var b = "animation-delay: "+x+"s";
console.log(a===b) //true