Openstatus www.openstatus.dev

fix: recompute styles (#1490)

authored by

Maximilian Kaske and committed by
GitHub
f1c4c4eb c0d3ebc2

+8 -8
+8 -8
apps/status-page/src/components/status-page/floating-button.tsx
··· 345 345 newTheme: CommunityTheme, 346 346 overrides?: Partial<ThemeDefinition>, 347 347 ) { 348 - // FIXME: only on prod, we have two style elements with the same id 349 - // we need to get rid of all of them except the one we want to update 350 348 try { 349 + // Only update the text content of existing style tags, don't remove them 350 + // This prevents React hydration errors during navigation 351 351 const allThemeStyles = document.querySelectorAll( 352 352 "style[id='theme-styles']", 353 353 ); 354 - allThemeStyles.forEach((style, index) => { 355 - if (index === 0) { 356 - style.textContent = generateThemeStyles(newTheme, overrides); 357 - } else { 358 - style.remove(); 359 - } 354 + const newStyles = generateThemeStyles(newTheme, overrides); 355 + 356 + // Update all style elements with the same content 357 + // This way React can manage the DOM without conflicts 358 + allThemeStyles.forEach((style) => { 359 + style.textContent = newStyles; 360 360 }); 361 361 } catch (error) { 362 362 console.error(error);