How exactly does styled-components syntax work?

user_19711812 0
Viewed 30

I was looking at styled-components and I saw this syntax:

const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
`;

I can't understand what is going on under the hood and what property is actually applied to the styled object. Is there anyone that can explain to me how this code even runs?

styled-components reactjs javascript
3 Answers

You create styled h1 element, for example in Header component :

    const Title = styled.h1`
        font-size: 2rem;
        text-align: center;
        color: blue;
    `;

You use it like a <h1> tag but with custom name:

    <Title>My portfolio</Title>

You finally get the static hash class name sc-<hashedStringName> and one is dynamic class:

  <h1 class="sc-gsnERi fiwDZi">My portfolio</h1>

So styled-components:

  • generate static class name
  • generate dynamic class name
user_197114910

Read about tagged templates

This is basically a function, but you can run it without ()

const styled = data => {
  return data + ' JavaScript';
};

const data = styled `I love`;

console.log(data);

Examples with built-in functions:

console.log('a b c'.split ` `)
console.log(Object.entries `abc`)
console.log([1, 2, 3].concat `abc`)

user_50895670

This basically allows you to create Custom Tag in JSX. You can also pass props to the styling properties in styled-components.

If you have this jsx:

<Title>This is Custom H1</Title>

const Title = styled.h1`
  color: red;
`

It will render HTML like this:

<h1 class="someRandomAlphabet">This is Custom H1</h1>

where the class of h1 tag will have these properties:

.someRandomAlphabet{
  color: red;
}
user_149886950
Related