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?
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`)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:
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;
}