[styles] withStyles + forwardRef + hoist issue

[amaslakov]

Custom table pagination and Spanning table look strange:

• This is not a v0.x issue.
• I have searched the issues of this repository and believe that this is not a duplicate.

Steps to Reproduce 🕹

It can be found in the components demo section, Tabs.
I saw it when I cleared the cache. It reproduces in incognito mode.

Your Environment 🌎

Tech	Version
Material-UI	v3.6.1
React
Browser	Chrome 70.0.3538.110 (Official Build) (64-bit), Firefox 63.0
TypeScript
etc.

[oliviertassinari]

@amaslakov I can't reproduce this. Could you provide more details on your platform? Does is still happen in private navigation?

[oliviertassinari]

@bmakan The drawer problem on Firefox is tracked on a different issue.

[amaslakov]

@amaslakov I can't reproduce this. Could you provide more details on your platform? Does is still happen in private navigation?

Yes. I see this in private mode in both Chrome and Firefox. I'm on Ubuntu 18.04

[oliviertassinari]

@eps1lon 🤽‍♂️ the issue I was facing with https://github.com/mridgway/hoist-non-react-statics is back. Chaining two higher order components that use forwardRef and hoist-non-react-statics skip the render method of the last HOC 😱.
It's also a sign that nobody in the community is using forwardRef yet.
I'm patching the documentation to avoid the issue.

[oliviertassinari]

@amaslakov Thank you for the repport 👌!

[oliviertassinari]

The patch:

const CustomTableCell = withStyles(theme => ({
  head: {
    backgroundColor: theme.palette.common.black,
    color: theme.palette.common.white,
  },
  body: {
    fontSize: 14,
  },
-}))(TableCell);
+}))(props => <TableCell {...props} />);

[eps1lon]

Can reproduce it on Chrome Version 70.0.3538.110 (Official Build) (64-bit) and Firefox Quantum 63.0.3 (64-bit)

@oliviertassinari TableCell is a normal component. Why would this cause issues?

Edit:
This looks more like a deploy issue or className collision:

Deployed style and source style do not match:
https://github.com/mui-org/material-ui/blob/e5fbf74a06157e2d73701a158e8d6b5914429ea1/docs/src/pages/demos/tables/CustomPaginationActionsTable.js#L103-L106

[oliviertassinari]

@eps1lon We have the following configuration withStyle -> withStyles -> TableCell. The first withStyle render method is skipped (on the server or on the client, I don't remember). This leads to 1. missing CSS 2. rehydration issue (class name counter) between the server and the client 💣.

[eps1lon]

But hnrs should never override. It only hoists if a property does not exist on the target. The behavior is different between dev and production environment. hnrs does not care about the environment.

[oliviertassinari]

I can reproduce the issue in development and production. Should I create a minimal reproduction?

[eps1lon]

@oliviertassinari That'd be nice. Although only so that I can understand it. #13818 should resolve hnrs issues for now.