DEV Community

loading...

Discussion on: Styled-components 3 ways

Collapse
pcjmfranken profile image
Peter Franken

Unfortunately no clean way to get syntax highlighting for the third option - at least in VSCode.

Other than that though, yeah, this is a very common way to access props and it's a very well hidden trick indeed.

Collapse
stereobooster profile image
stereobooster Author

It works in TypeScript though:

Collapse
pcjmfranken profile image
Peter Franken

Ran into quite a few issues and limitations sadly.

The css interpolation function is still required if you want to execute logic statements or curried functions. Slightly more info in the official docs: styled-components.com/docs/api#css

Also the syntax highlighting breaks if you place the opening backtick that comes after (props) => on a new line. Unfortunately Prettier automatically places the entire inner interpolation function on its own line grrr 😝

Thread Thread
stereobooster profile image
stereobooster Author • Edited

The css interpolation function is still required if you want to execute logic statements or curried functions.

simple template literal (without css):

`logic statement: ${prop === 1 ? "one" : "many"}
function: ${fun(prop)}`
Enter fullscreen mode Exit fullscreen mode

Sadly, but yes highlighting is broken in many cases

Collapse
pcjmfranken profile image
Peter Franken

Huh, neat, thanks for sharing! Looks like syntax highlighting does indeed play nice when you add any sort of typings.

Guess what I'll be working on this Monday morning :)