If I create a wrapper function for every styled component call - eg withStyledDoThing - it always displays this

[inspiraller]

This is an example of my wrapper method

const withStyledDoThing = <P extends {}>(
  Comp: ComponentType<P>, 
  extendSomething?: (p: string) => string, 
  props: string) => 
  styled(Comp)<ComponentType<P>, {}>`
    ${extendSomething(props)}
`;

How can I pass the displayName from the original component?
I have tried this but it does not work either. I still get output in my classnames as 'withStyledDoThing'

 const withStyledDoThing =  <P extends {}>(Comp: ComponentType<P>, extendSomething?: (p: string) => string, props: string) => {
  const styledResult = styled(Comp)<ComponentType<P>, {}>`
    ${extendSomething(props)}
  `;
  styledResult.displayName = Comp.displayName;
  return styledResult;
};

Is there a way to change the displayName to the original component that was supplied to it? or is it a feature that can be added?

[parkerault]

As a workaround you can manually add className to your jsx when you use a styled component: <MyStyledDiv className="myModule_myStyledDiv" />. It's annoying but it will give you your custom file name in addition to the hashed one. Honestly, so many issues are about the debug tooling; it's the weakest point in styled components and it should be a high priority. I'm on a team that uses styled components, and I honestly don't see any advantage over css modules at this point, and lots of disadvantages. Sorry for the rant.

[inspiraller]

@parkerault thanks. Its a thought when debugging maybe, thanks. Though I want an elegant solution I can put in and forget about. Yes css modules is ok, though it also has a problem by concatenaing a dynamic name. Personally I don't see the problem with just using a raw className and scss. Its historic and exchangable between other frameworks, but its not 'the react way'. I even created an npm library that pulls all my raw css - that I test separately on flat html files, then gets imported for use as styled components because raw css is just faster to work with removing compiling process and setup, but I digress.