0

I'm following a React course and came across this lesson where they import a component from styled-components but what is strange to me is line 4 where they use the backticks interpolation without enclosing it in parenthesis and it seems it should not be any space between the backticks and the styled.header.

enter image description here

juliangonzalez
  • 4,231
  • 2
  • 37
  • 47
  • 2
    `var test = (a) => console.log(a+' man'); test\`whatever\`` will output `whatever man`. In your example, styled.header is a function that receives a string (css, in your example) as its only argument. – castis May 26 '17 at 17:18
  • Side-question: what IDE are you using that properly highlights CSS in a string template literal? Does it give you code-completion, too, like `text-align:` suggests `left, right, center` etc? (Lack of that in my IDE was one reason I didn't like styled-components.) – Aaron Beall May 26 '17 at 17:28
  • @Aaron it's language-babel package for Atom, more info here https://github.com/styled-components/styled-components#syntax-highlighting – juliangonzalez May 26 '17 at 17:35

1 Answers1

2

That's call Tagged Template Literals, a new feature in ES6.

You can read more about this in the styled-components docs and this article.

Tharaka Wijebandara
  • 7,955
  • 1
  • 28
  • 49