Dealing with unsupported CSS properties in Next.js or implementing @supports directives in Chakra-UI

Question

Dealing with unsupported CSS properties in Next.js or implementing @supports directives in Chakra-UI

Currently, I am working on a React component that adjusts opacity values based on the support for the CSS backdrop-filter directive:

background={(() => {
  const opacity = isBackdropFilterSupported() ? 0.75 : 0.98
  return (
    `linear-gradient(
      180deg, rgba(76, 63, 143, ${opacity}) 62.76%,
      rgba(184, 169, 255, ${opacity}) 100%
    )`
  )
})()}

The challenge arises when the site is server-side rendered with Next.js. The server generates false as the value returned by

CSS.supports('backdrop-filter', 'blur(1px)')

, leading to inconsistencies regardless of client properties.

To address this issue, one potential solution involves utilizing CSS in the following manner:

.drawer {
  --opacity: 0.75;
  background: linear-gradient(
    180deg, rgba(76, 63, 143, var(--opacity)) 62.76%,
    rgba(184, 169, 255, var(--opacity)) 100%
  );
}
@supports not (backdrop-filter: blur(1px)) {
  .drawer { --opacity: 0.98; }
}

This approach aims to circumvent the server-side rendering issue and be interpreted correctly by the client. However, integrating such styles into Chakra-UI, which this project is built upon, poses a challenge due to the lack of guidance on how to do so.

css next.js chakra-ui

Answer 1

Answer №1

In my initial post, I failed to mention that I encountered an error message stating:

Prop id did not match. Server: "toggle--gxfg3t7xwo" Client: "toggle--ki0j10p2l"

.

This discrepancy indicated that the browser-generated DOM differed from the Next.js-generated DOM. As a result, Next.js abandoned its rehydration attempt, leading to server-rendered values being displayed.

To address this issue, I implemented a hook to detect when the component was mounted on the client side. The implementation of this hook is as follows:

export const useMounted = () => {
  // https://www.joshwcomeau.com/react/the-perils-of-rehydration/
  const [hasMounted, setHasMounted] = React.useState(false);
  React.useEffect(() => {
    setHasMounted(true);
  }, []);
  return hasMounted;
};

Subsequently, the opacity calculation was modified to account for the mounting status:

const hasMounted = useMounted()
⋮
const opacity = hasMounted && isBackdropFilterSupported() ? 0.75 : 0.98

Answer 2

In my initial post, I failed to mention that I encountered an error message stating:

Prop id did not match. Server: "toggle--gxfg3t7xwo" Client: "toggle--ki0j10p2l"

.

This discrepancy indicated that the browser-generated DOM differed from the Next.js-generated DOM. As a result, Next.js abandoned its rehydration attempt, leading to server-rendered values being displayed.

To address this issue, I implemented a hook to detect when the component was mounted on the client side. The implementation of this hook is as follows:

export const useMounted = () => {
  // https://www.joshwcomeau.com/react/the-perils-of-rehydration/
  const [hasMounted, setHasMounted] = React.useState(false);
  React.useEffect(() => {
    setHasMounted(true);
  }, []);
  return hasMounted;
};

Subsequently, the opacity calculation was modified to account for the mounting status:

const hasMounted = useMounted()
⋮
const opacity = hasMounted && isBackdropFilterSupported() ? 0.75 : 0.98

Dealing with unsupported CSS properties in Next.js or implementing @supports directives in Chakra-UI

Answer №1

Similar questions

Having trouble with my initialData in react-query - any suggestions on how to fix it?

What is the best way to retrieve the URL of a website using scrapy?

Struggling to locate production files with the combination of `fast-glob` and `process.cwd()` when dealing with dynamic route segments

Exploring ways to style font families for individual options within ng-options

The 'dehydratedState' attribute is not found in the 'object' type

Product sketching libraries in JavaScript

What is the method for triggering two actions within a single linked tag?

Adjusting the CSS class name based on the screen size and applying styles to that class only during the "onload" event

Using display:inline-block will increase the vertical spacing

`The logo does not dim when the popup is displayed`

Even after assigning the class "img-fluid" to my image, it still fails to properly adjust to the screen size

TinyMCE version 5.x - Stand out with a specific selection in a personalized drop-down navigation bar

What techniques can be used to maintain the alignment of an image while the surrounding text changes?

Error message: Next.js throws a ReferenceError stating that the 'exports' is not defined

Issue: Unable to connect to Cloud Firestore backend following transition from static data to process.env variables

Creating a fullscreen layout in HTML with specific minimum and maximum widths

How can I address the variations in CSS appearance between Firefox and Google Chrome?

What is causing justify-content to not function properly in React?

Unable to submit form in Nextjs using react-bootstrap

Having trouble with jQuery's recursive animation functionality