如何解决如何在 Next.js 中处理不受支持的 CSS 属性或在 Chakra-UI 中使用 @supports 指令
我正在使用一个 React component,它根据是否支持 CSS backdrop-filter
指令使用不同的不透明度值:
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%
)`
)
})()}
问题是该站点是使用 Next.js 在服务器端生成的。 CSS.supports('backdrop-filter','blur(1px)')
在服务器上返回 false
,因此无论客户端属性如何,该值始终为 false
。
一种解决方案是使用 CSS,如:
.drawer {
--opacity: 0.75;
background: linear-gradient(
180deg,var(--opacity)) 62.76%,var(--opacity)) 100%
);
}
@supports not (backdrop-filter: blur(1px)) {
.drawer { --opacity: 0.98; }
}
这应该由客户端解释并避免服务器端渲染问题,但我没有发现关于如何将这种样式集成到它所构建的 Chakra-UI 中的迹象。
解决方法
我在原来的帖子中没有提到它,但我收到了一个错误,如:<?php
$code = <<<EOD
<h4>Show this title in HTML</h4>
<p>This paragraph must be in <strong>HTML</strong> and this <a href="">Link</a> too !</p>
<?php
echo "Display this PHP code!";
?>
<script>
alert("Don't pop-up please!");
</script>
EOD;
$code = str_replace("\n","<br>",$code);
$code = str_replace(" "," ",$code);
$html = <<<EOD
<h1>Escape HTML or Other Programming tags</h1>
<p>This must be rendered without any problem</p>
<p>
<code style="display:block;background:rgb(230,230,230);padding:2%">
$code
</code>
<a href="">Link rendered</a>
</p>
EOD;
echo $html;
。
事实证明,这意味着浏览器生成的 DOM 与 Next.js 生成的 DOM 不匹配。发生这种情况时,Next.js 放弃尝试重新水化文档,这就是我获得服务器渲染值的原因。
解决方案是使用钩子来确定组件何时被挂载(这只发生在客户端上)。那个钩子看起来像:
Prop id did not match. Server: "toggle--gxfg3t7xwo" Client: "toggle--ki0j10p2l"
然后不透明度确定变为:
export const useMounted = () => {
// https://www.joshwcomeau.com/react/the-perils-of-rehydration/
const [hasMounted,setHasMounted] = React.useState(false);
React.useEffect(() => {
setHasMounted(true);
},[]);
return hasMounted;
};
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。