mismerge
mismerge copied to clipboard
[BUG][In React] The dark mode colors are lost after toggling visibility
In React, when using a dark theme, if a component is hidden once and then shown again, the dark theme colors are lost and it reverts to the default colors.
Before hiding:
After showing again:
Here is my code:
import { MisMerge3, DefaultDarkColors, DefaultLightColors } from '@mismerge/react'
import { useTheme } from 'next-themes'
export function Merge ({
isShow,
localContent,
remoteContent,
baseContent,
}: MergeModalProps) {
const { theme } = useTheme()
const [ mergedContent, setMergedContent ] = useState(baseContent)
useEffect(() => {
setMergedContent(baseContent)
}, [ baseContent ])
if (!isShow) return null
return (
<MisMerge3
lhs={localContent}
ctr={mergedContent}
rhs={remoteContent}
onCtrChange={setMergedContent}
colors={theme === 'dark' ? DefaultDarkColors : DefaultLightColors}
wrapLines={true}
/>
)
}