Styled-components 3 ways

stereobooster - Nov 8 '20 - - Dev Community

Style Objects

const Button = styled.button((props) => ({
  color: props.color,
  border: `2px solid ${props.border}`,
  background: props.background,
}));
Enter fullscreen mode Exit fullscreen mode

styled-components optionally supports writing CSS as JavaScript objects instead of strings. This is particularly useful when you have existing style objects and want to gradually move to styled-components.

Tagged Template Literals

const Button = styled.button`
  color: ${(props) => props.color};
  border: 2px solid ${(props) => props.border};
  background: ${(props) => props.background};
`;
Enter fullscreen mode Exit fullscreen mode

Tagged Template Literals are a new feature in ES6. They let you define custom string interpolation rules, which is how we're able to create styled components.

If you want to learn more about tagged template literals, check out Max Stoiber's article: The magic behind 💅🏾 styled-components

And the third one...

But apparently, there is a third way which is not documented:

const Button = styled.button((props) => `
  color: ${props.color};
  border: 2px solid ${props.border};
  background: ${props.background};
`);
Enter fullscreen mode Exit fullscreen mode

When I saw it the first time, I thought this was an error and it would not work. Actually, it does. From my POV it's more readable than "Tagged Template Literals".

I wonder why it's not listed in the official documentation.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Terabox Video Player