casesandberg / react-color

:art: Color Pickers from Sketch, Photoshop, Chrome, Github, Twitter & more
http://casesandberg.github.io/react-color/
MIT License
12.05k stars 922 forks source link

how to resolve Warning: Prop `style` did not match. #873

Open pittleCheung opened 2 years ago

pittleCheung commented 2 years ago
image
pittleCheung commented 2 years ago

This problem occurs when I use ChromePicker in next.js

DBorhara commented 1 year ago

I know this is late @pittleCheung but just for anyone else who came across this with nextjs, you have to turn off SSR for the component.

ajaykumareminence commented 1 year ago
"use client"
import { useState, useId } from "react"
import { SketchPicker } from "react-color"
export default function page(){
    const pickerId = useId()
    const [color, setColor] = useState('#70FF00');
    function handleColor(args){
        setColor(args.hex)
    }
    return(
        <>
        <SketchPicker color={color} onChange={handleColor} key={pickerId}/>
        </>
    )
}

facing the same issue