Next.js: react-color - Warning: Prop `style` did not match

Question

I'm using Next.js framework & I'm getting a warning when I use react-color in my index.js.

Here is index.js:

import SketchPicker from 'react-color';

const index = () => {
    return <SketchPicker />
}

export default index;

Answer 1

You're getting that error because the style prop generated from SSR does not match the client-side one. You could solve it by only loading SketchPicker on the client with Next.js dynamic import.

You also need to pass a state setter to onChangeComplete and state variable to color to properly handle the color picking.

import dynamic from 'next/dynamic';

const SketchPicker = dynamic(
  () => import('react-color').then((mod) => mod.SketchPicker),
  { ssr: false }
);

const Index = () => {
    const [color, setColor] = useState();
    const handleChange = (color) => setColor(color);

    return <SketchPicker color={color} onChangeComplete={handleChange} />;
}

export default Index;