CODEWITHSUNDEEP
reactjsstyled-componentstemplate-strings
rimraf
rimraf

Reputation: 4126

Concat prop value with string in styled-component

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.

Upvotes: 1

Views: 3375

Answers (2)

Miguel
Miguel

Reputation: 1636

Yes, you can use `` inside a template tag and yes you can use props to generate your style in your styled components by using functions to interpolate the value, in your code for example:

const MyComponent = (props) => {
  const StyledLineItem = styled.li`
    animation: ${someAnime};
    animation-delay: ${props => `${props.x}s` : '0'};
  `
  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>
    )
  }

More info:

https://www.styled-components.com/docs/basics#adapting-based-on-props

Upvotes: 1

Exit Ekkasit Pinyoanuntapong
Exit Ekkasit Pinyoanuntapong

Reputation: 116

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

Upvotes: 1

Related Questions