Hydration failed for server rendered code

[pekarja5]

Description

Hydration fails with:
Prop `style` did not match. Server: "position:absolute;left:0;right:0" Client: "position:absolute;will-change:;left:0;right:0"

Server is running Next.js 12.0.5 with React 18 on Node 16 LTS.

The problem is caused by different style resolve for empty strings (server won't include them, but client does) resulting in hydration fail.
Using undefined instead of empty strings should unify the results (key should not be present on both - client and sever).

Operations like this are causing the issue: https://github.com/zillow/react-slider/blob/master/src/components/ReactSlider/ReactSlider.jsx#L977

[kris-ellery]

Thanks for submitting an issue @pekarja5!

styled-components are known to have SSR issues with 3rd party libs. Material UI team has to deal with it all the time. Feel free to open PR if it's something you would like to address before we're able to get to it. Thanks!

[pekarja5]

@kris-ellery Any chance to have #272 merged to fix the issue?

[kris-ellery]

@pekarja5 thank you for contributing! Released in 2.0.4.