The problem

Lets consider I have a SFC (I am using TypeScript) and export it like:

export const AppShell: React.SFC<Props> = (props: Props) => (
  ...
)

All fine. But now before I export my component I want to wrap it with a HOC like withStyles from MaterialUI. Now I want to do something like:

const AppShell: React.SFC<Props> = (props: Props) => (
 ...
)

And export it as:

export const AppShell = withStyles(styles)<Props>(AppShell);

Of course this will result in an error:

[ts] Cannot redeclare block-scoped variable 'AppShell'.

Solutions with trade-off

As far as I know I will now have two options:

1) Use an default export:

export default withStyles(styles)<Props>(AppShell);

Because I am not a fan of default exports because of their many disadvantages I am not ok with that solution.

2) Use a prefix like 'Raw' for my components before they get wrapped:

const RawAppShell: React.SFC<Props> = (props: Props) => (
 ...
)

Export it like:

export const AppShell = withStyles(styles)<Props>(RawAppShell);

I like this approach much more also with the trade-off of adding this prefix.

Other Solutions

How do you handle this in your projects? Is there already a best-practice solution out there? It is very important for me that I have an named export for my component so I could not accept a solution with an default export at all.

Thank you in advance.