Merge pull request #887 from City-of-Helsinki/hds-1425-useTheme-fix

Hds 1425 use theme fix

packages/react/src/hooks/useIsomorphicLayoutEffect.ts

@@ -0,0 +1,7 @@
+import { useLayoutEffect, useEffect } from 'react';
+
+/**
+ * If rendering on client side, use the useLayoutEffect hook. If SSR, use useEffect to avoid a big warning.
+ */
+const useIsomorphicLayoutEffect = typeof window !== 'undefined' && window.document ? useLayoutEffect : useEffect;
+export default useIsomorphicLayoutEffect;

packages/react/src/hooks/useTheme.tsx

@@ -1,6 +1,8 @@
-import { useEffect, useRef } from 'react';
+import { useRef } from 'react';
 import uniqueId from 'lodash.uniqueid';
 
+import useIsomorphicLayoutEffect from './useIsomorphicLayoutEffect';
+
 /**
  * Sets the given custom theme for the component
  * @param selector    The class selector for the component. Used to find the correct style sheet to apply the custom styles to
@@ -13,7 +15,6 @@ const setComponentTheme = <T,>(selector: string, theme: T, customClass: string):
 
   // checks if the given css rule contains the custom class selector
   const hasCustomRule = (rule: CSSStyleRule): boolean => rule.selectorText?.includes(`${selector}.${customClass}`);
-
   try {
     // the index of the parent stylesheet
     let parentIndex = [...document.styleSheets].findIndex((styleSheet) => {
@@ -63,7 +64,7 @@ export const useTheme = <T,>(selector: string, theme: T): string => {
   // create a unique selector for the custom theme
   const customClass = useRef<string>(useCustomTheme ? uniqueId('custom-theme-') : '').current;
 
-  useEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     if (useCustomTheme) setComponentTheme<T>(selector && selector.split(' ')[0], theme, customClass);
   }, [selector, theme, customClass, useCustomTheme]);
 

site/src/docs/foundation/guidelines/server-side-rendering.mdx

@@ -174,4 +174,6 @@ the tool described in option 1. But if you are unable to use that, extracting th
 
 If you customise hds-react components with the <code>theme</code> prop, the style changes will not be visible on the
 first render. The preferred way to customise hds-react components with server-side rendering is using the <code>className</code>
-prop.
+prop. However, notice that sometimes CSS selector specificity of 0-1-0 may not be enough to overwrite default CSS variables.
+This depends on the CSS declaration order on the page or component's default styles selector specificity.
+You may have to use a more specific CSS selector for the custom styles class, for example, `#myComponent.custom-class`, `.custom-class.custom-class`, etc.