使用 StayedCSS 在 Next.js 中应用 CSS-js教程-PHP中文网

Next.js App Router 中的样式问题

自从 Next.js App Router 推出以来，开发人员已经接受了一种分离服务器和客户端组件的范例。虽然高效，但它带来了新的挑战。

挑战一：支持服务器端和客户端环境

Next.js 经常使用 React 样式库，因为它基于 React。但是，其中许多库都针对 CSR（客户端渲染）进行了优化，而 App Router 默认为 SSR（服务器端渲染）。这种不匹配可能会导致 SSR 和 CSR 之间的样式不一致。

挑战 2：无风格内容的闪现 (FOUC)

深色模式是改善用户体验的常见功能，但 SSR 通常在浅色模式下渲染 HTML。客户端稍后应用深色模式，导致屏幕闪烁，影响用户体验。

我自己在开发过程中也面临过这些挑战。尽管 Next.js 具有强大的优势，但样式问题仍然存在。以下是我如何应对他们的。

StayedCSS：Next.js 应用程序路由器的 CSS 库

矢量dxy / 呆CSS

✨ 用于 Next.js App Router 的轻量级 CSS 库，支持服务器和客户端组件。

Apply CSS in Next.js with StayedCSS

StayedCSS：Next.js App Router 的 CSS 库

简介

StayedCSS - 测试版

StayedCSS 是一个专为 Next.js App Router 设计的静态 CSS 库，为服务器和客户端组件提供全面支持。它具有类似于基本 CSS 的简单语法，可实现高效的样式设置，旨在成为 Next.js App Router 的下一代 CSS 库。

目前处于测试版本，StayedCSS 在优化和稳定性方面正在快速改进。它将继续发展，为您的项目提供更好的造型体验。

主要特点

服务器和客户端组件支持：将样式无缝应用到 Next.js App Router 环境中的服务器和客户端组件。
各种样式选项：支持各种 CSS 样式，例如 :hover、::after 和 ~ p。
媒体查询：简化响应式设计实现。
深色模式：提供无闪烁的深色模式过渡。

开始使用

安装

npm install stayedcss
<span># or</span>
yarn

登录后复制

…

在 GitHub 上查看

为了解决这些问题，我创建了 StayedCSS。该库支持服务器和客户端环境，提供无闪烁暗模式并与 Next.js App Router 无缝兼容。

我希望 StayedCSS 帮助其他开发者解决这些挑战，我很高兴与社区分享！

1. 将样式应用到服务器组件

npm install stayedcss
<span># or</span>
yarn

登录后复制

使用 st 函数定义样式，该函数生成静态 CSS 文件和唯一的类名。每个样式对象都链接到一个 componentId，确保轻松区分。服务器组件现在可以利用类似 CSS-in-JS 的语法，同时受益于针对 SSR 优化的静态 CSS。

2. 将样式应用到客户端组件

import { st } from "stayedcss";

const styles = st({
  componentId: "components/example",
  container: {
    backgroundColor: "white",
    padding: "20px",
  },
});

export default function Example() {
  return (
    <div className={styles.container}>
      <h1>Hello, StayedCSS!</h1>
    </div>
  );
}

登录后复制

对于客户端组件，使用 stClient 函数来定义样式。与服务器组件类似，它根据 componentId 生成静态 CSS 文件和唯一的类名称。服务器和客户端组件共享相同的简单样式方法。

3.深色模式不闪烁

'use client'

import { stClient } from "stayedcss/client";

export default function ExampleClient() {
  return (
    <div className={style.container}>
      <div className={style.title}>title</div>
    </div>
  );
}

const style = stClient({
  componentId: "components/example-client",
  container: {
    marginBottom: 60,
  },
  title:{
    fontSize: 27,
  },
});

登录后复制

StayedCSS 通过使用 cookies 应用深色模式，解决了 SSR 中的 FOUC 问题，没有延迟或闪烁。使用匹配的 componentId 定义浅色和深色模式样式以实现平滑过渡。

4.简单方法的响应式页面

import { st, stDark } from "stayedcss";

export default function DarkModeExample() {
  return (
    <div className={style.container}>
      <h1>Hello world!</h1>
    </div>
  );
}

const style = st({
  componentId: "component/darkmode-example",
  container: {
    backgroundColor: "white",
  },
});

stDark({
  componentId: "component/darkmode-example",
  container: {
    backgroundColor: "black",
  },
});

登录后复制

StayedCSS 通过移动设备、平板电脑和桌面等关键字轻松进行媒体查询。直接在样式对象中声明响应式样式，以实现跨屏幕尺寸的简洁和自适应设计。

5. 使用高级 CSS 进一步发展

const style = st({
  componentId: "components/docs/media-query",
  container: {
    display: "flex",
    justifyContent: "center",
    padding: "20px",
    backgroundColor: "lightgray",
  },
  "@mobile": {
    container: {
      backgroundColor: "pink", 
      padding: "10px",
    },
  },
  "@tablet": {
    container: {
      backgroundColor: "lightblue", 
      padding: "15px",
    },
  },
  "@desktop": {
    container: {
      backgroundColor: "lightgreen",
      width: "50%",
    },
  },
});

登录后复制

支持的功能包括伪类 :hover、伪元素 ::before 和组合器 ~。编写熟悉的 CSS 语法，StayedCSS 将其优化为静态文件，从而实现跨服务器和客户端组件的高性能样式。

有关详细示例，请访问文档页面。

StayedCSS 旨在简化 Next.js App Router 环境中的样式。从服务器-客户端兼容性到高级 CSS 功能，它旨在提供更好的样式体验。今天就尝试一下并分享您的想法 - 我很想听听您的反馈！？

以上是使用 StayedCSS 在 Next.js 中应用 CSS的详细内容。更多信息请关注PHP中文网其他相关文章！