If I create a wrapper function for every styled component call - eg withStyledDoThing - it always displays this
inspiraller opened this issue · 2 comments
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?
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.
@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.