React动态内联CSS报错：Warning: Maximum update depth exceeded

你遇到的循环更新错误，核心原因并非单纯重渲染，而是ColorPicker的onChange回调触发逻辑与你的state更新不匹配，常见场景有两种：

• 该组件的onChange返回的不是直接的颜色字符串，而是包含颜色信息的对象（比如{ hex: '#FFFFFF', rgb: {...} }），直接把这个对象传给setColor会导致state类型改变，组件重新渲染后，ColorPicker因value类型不匹配再次触发onChange，形成循环。
• 组件内部对value的校验逻辑存在问题，当传入的value格式不符合预期时，会强制触发onChange修正，进而引发循环更新。

解决方法： #

1. 包装回调，提取正确的颜色值

先确认onChange返回值的格式，从中提取你需要的颜色字符串：

const Card = () => {
    const [color, setColor] = useState('#FFF')

    const handleColorChange = (newColor) => {
        // 根据组件实际返回格式调整，比如取hex属性
        const hexColor = typeof newColor === 'string' ? newColor : newColor.hex;
        setColor(hexColor);
    }

    return (
      <>
        <Box sx={{backgroundColor: color}}>
           some content
        </Box>
        
        <ColorPicker
           value={color}
           onChange={handleColorChange}
        />
     </>
    )
}

2. 匹配组件期望的value格式

如果组件要求value传入对象而非字符串，按照组件文档要求传入对应格式：

const Card = () => {
    const [color, setColor] = useState('#FFF')

    return (
      <>
        <Box sx={{backgroundColor: color}}>
           some content
        </Box>
        
        <ColorPicker
           value={{ hex: color }}
           onChange={(newColor) => setColor(newColor.hex)}
        />
     </>
    )
}

3. 优化回调避免不必要重渲染（可选）

用useCallback包裹回调函数，避免每次组件渲染都创建新的回调实例：

import { useCallback } from 'react';

const Card = () => {
    const [color, setColor] = useState('#FFF')

    const handleColorChange = useCallback((newColor) => {
        const hexColor = typeof newColor === 'string' ? newColor : newColor.hex;
        setColor(hexColor);
    }, [])

    return (
      <>
        <Box sx={{backgroundColor: color}}>
           some content
        </Box>
        
        <ColorPicker
           value={color}
           onChange={handleColorChange}
        />
     </>
    )
}

内容的提问来源于stack exchange，提问作者Lofton Gentry