re-upgrade to styled-components v6 + fixed previously noted styling i…

…ssues #556

app/app.js

@@ -29,6 +29,10 @@ import LanguageProvider from 'containers/LanguageProvider';
 
 // Import ThemeProvider
 import { Grommet } from 'grommet';
+
+import { StyleSheetManager } from 'styled-components';
+import isPropValid from '@emotion/is-prop-valid';
+
 import theme from 'themes/theme-nz';
 import './fonts/fonts.css';
 
@@ -66,12 +70,24 @@ const render = (messages) => {
   root.render(
     <Provider store={store}>
       <LanguageProvider messages={messages}>
-        <Grommet theme={theme}>
-          <Router
-            history={history}
-            routes={rootRoute}
-          />
-        </Grommet>
+        <StyleSheetManager
+          enableVendorPrefixes
+          shouldForwardProp={(propName, target) => {
+            if (typeof target === "string") {
+              // For HTML elements, forward the prop if it is a valid HTML attribute
+              return isPropValid(propName);
+            }
+            // For other elements, forward all props
+            return true;
+          }}
+        >
+          <Grommet theme={theme}>
+            <Router
+              history={history}
+              routes={rootRoute}
+            />
+          </Grommet>
+        </StyleSheetManager>
       </LanguageProvider>
     </Provider>
   );

app/components/buttons/ButtonTagCategory/index.js

@@ -22,7 +22,7 @@ const getColor = (props, isHover = false) => {
 
 // eslint-disable no-nested-ternary
 const ButtonTagCategory = styled(Button)`
-  color: ${(props) => palette('taxonomiesTextColor', props.taxId)}};
+  color: ${(props) => palette('taxonomiesTextColor', props.taxId)};
   background-color: ${(props) => getColor(props)};
   margin-right: 2px;
   border-radius: ${(props) => props.isSmartTag ? 9999 : 3}px;
@@ -31,7 +31,7 @@ const ButtonTagCategory = styled(Button)`
   cursor:${(props) => props.disabled ? 'default' : 'pointer'};
   border: 1px solid ${(props) => getColor(props)};
   &:hover, &:focus-visible {
-    color: ${(props) => palette('taxonomiesTextColor', props.taxId)}};
+    color: ${(props) => palette('taxonomiesTextColor', props.taxId)};
     background-color: ${(props) => getColor(props, true)};
     border-color: ${(props) => getColor(props, true)};
   }

app/components/fields/ShortTitleTag.js

@@ -3,7 +3,7 @@ import { palette } from 'styled-theme';
 
 const ShortTitleTag = styled.span`
   display: inline-block;
-  color: ${({ pIndex }) => palette('taxonomiesTextColor', pIndex)}};
+  color: ${({ pIndex }) => palette('taxonomiesTextColor', pIndex)};
   background-color: ${({ pIndex }) => palette('taxonomies', pIndex || 0)};
   padding: 1px 6px;
   margin-right: 2px;

package.json

@@ -106,7 +106,7 @@
     "rehype-external-links": "^3.0.0",
     "reselect": "5.1.1",
     "sanitize.css": "13.0.0",
-    "styled-components": "4.2.0",
+    "styled-components": "6.1.13",
     "styled-theme": "^0.3.3",
     "textarea-markdown-editor": "^1.0.4",
     "warning": "4.0.3"