style did not match server/client

[bart-sofomo]

When using this library with nextjs 14 I'm getting:

Warning: Prop `style` did not match. 
Server: "position:absolute;top:0;left:0;right:0;bottom:0;overflow:scroll;-webkit-overflow-scrolling:touch;margin-right:0;margin-bottom:0" 
Client: "position:absolute;top:0;left:0;right:0;bottom:0;overflow:scroll;-webkit-overflow-scrolling:touch;margin-right:-15px;margin-bottom:-15px"

anyone run into this issue? Any fix?

[sam2x]

I got it too. In my case, the Scrollbars component is trying to apply a margin-right and margin-bottom of -16px on the client-side, but these styles doesn't apply server-side, thus causing the mismatch. Solution: doing a dynamic import of the scrollbar by using next/dynamics and setting server-side-rendering to off:

// ...import section 
import dynamic from 'next/dynamic';

// Dynamically import the Scrollbars component with SSR disabled
const Scrollbars = dynamic(
  () => import('react-custom-scrollbars-2').then((mod) => mod.Scrollbars),
  { ssr: false }
);
// your component code below...