使用 StayedCSS 在 Next.js 中应用 CSS

Next.js 应用路由器中的样式问题

自 Next.js App Router 发布以来，开发人员已经采用了将服务器和客户端组件分开的范式。虽然这种范式很高效，但也带来了新的挑战。

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

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

挑战 2：无样式内容闪烁 (FOUC)

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

我在开发过程中也曾面临过这些挑战。尽管 Next.js 功能强大，但样式问题始终困扰着我。下面是我解决这些问题的方法。

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

vectordxy/stayedcss 的翻译结果:

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

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
# or
yarn

在 GitHub 上查看

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

我希望 StayedCSS 能够帮助其他开发人员解决这些挑战，并且我很高兴与社区分享它！

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

import { st } from "stayedcss";

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

export default function Example() {
  return (
    
      Hello, StayedCSS!
    
  );
}

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

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

'use client'

import { stClient } from "stayedcss/client";

export default function ExampleClient() {
  return (
    
      title
    
  );
}

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

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

3. 无闪烁的暗黑模式

import { st, stDark } from "stayedcss";

export default function DarkModeExample() {
  return (
    
      Hello world!
    
  );
}

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

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

StayedCSS 通过使用 cookie 来解决 SSR 中的 FOUC 问题，从而应用暗黑模式而不会出现延迟或闪烁。使用匹配的 componentId 定义明暗模式样式，以实现平滑过渡。

4. 简单方法实现响应式页面

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%",
    },
  },
});

StayedCSS 使用“mobile”、“tablet”和“desktop”等关键字简化媒体查询。直接在样式对象中声明响应式样式，实现简洁且自适应的设计，适用于各种屏幕尺寸。

5. 使用高级 CSS 进一步完善

const style = st({
  componentId: "components/docs/pseudo-classes",
  container: {
    backgroundColor: "black",
    ":hover": {
      backgroundColor: "green",
    },
  },
});

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

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

StayedCSS 旨在简化 Next.js App Router 环境中的样式设置。从服务器-客户端兼容性到高级 CSS 功能，它旨在提供更好的样式设置体验。立即试用并分享您的想法 — 我很想听听您的反馈！🚀

CLIS.CC