[Suggestion] - Display named styled components for React Dev Tools

[danirdd92]

Hi team,

I've noticed that whenever I'm styling a component it shows in react dev tools as Styled.[tag] with a forwardRef for the html element.
My suggestion is pretty basic, make all the components created to be named.

I'm not fluent in the inner workings of the library but if a 3rd argument can be passed into the component to give it a name, or somehow make the component derive it's name from the variable it's being passed into (magic?) it would be awesome!

[prateekbisht23]

By default, styled components show up as Styled.div or similar in React DevTools because JS can’t infer variable names at runtime.

Solution: Manually set a displayName:

const MyButton = styled.button`...`;
MyButton.displayName = 'MyButton';

💡 Better: Use babel-plugin-styled-components — it auto-generates display names based on your variable names. Just install and add it to your Babel config.

This makes debugging much easier with zero extra code.

Hope that helps!!