Discussion on: How do you convert less stylesheets to styled components?

[Sung M. Kim]

I enjoyed the post (even though I've never used LESS before).

I've just learned of calc being able to do calculations regardless of units so gave it a try for code under Step 4: Convert any variables referenced in the less stylesheets.

const BlogItem = styled.div`
  ${({ theme }) => `
    border: 1px solid red;
    border-radius: calc(${theme["global-border-radius"]} / 20)
  `}
`;

And it seemed to work great without using modifySize.

And while trying out the theme provider, I learned that ThemeProvider accepts only single child.

Remove React.Children.only from theme provider #1325

clayne11 commented on Nov 23, 2017

It there a reason to have React.Children.only in the theme provider? It seems unnecessary and it makes certain layouts not possible. Why not simply return this.props.children from render?

View on GitHub

[Code Mochi]

Thanks so much for the comment Sung, I had no idea that you can use calc like that. That's so much easier! I'll be sure to update the post to have your suggestion.

[Sung M. Kim]

You're welcome.

and I also learned how to use the ThemeProvider as well as steps to migrate CSS (this post applies not just to LESS IMO) to Styled Components 🤜