后端开发教程 - Java、Spring Boot 实战 - msg200.com

适用于您的开源 React 组件 AWS Security LIVE 的最小 CSS-in-JS 解决方案！

Administrator 2025-06-10

适用于开源 React 组件的最小 CSS-in-JS 解决方案

AWS 安全上线！

大家好！我叫 Vlad，对 JavaScript 微库的开发非常感兴趣。我目前的主要项目是：

react-colorful — React 和 Preact 应用最小、最快的颜色选择器组件（比 react-color 轻 14 倍）
wouter — 适用于 React 和 Preact 的极简主义友好型 1.3KB 路由解决方案
omgopass — 一个微小的 0.3 KB 且超快的易记密码生成器（比密码生成器快 600 倍）

react-colorful是唯一一个同时提供 JS 和 CSS 的项目。我想与大家分享我们在开发过程中遇到的挑战。或许，我们的经验能帮助你打造更轻量级的开源 React 组件。

📦问题

自首次发布以来，react-colorful就包含一个开发人员必须导入的 CSS 文件：

import { HexColorPicker } from "react-colorful";
import "react-colorful/dist/index.css"; // 👈 this one

就捆绑包大小而言，一切都非常酷，因为我们将所有样式写为 CSS 文件，然后通过捆绑工具进行压缩和最小化。

这看似是一个不错的解决方案，但我们开始收到许多开发者的投诉，他们无法使用这些样式。在 React 生态系统中，只使用Emotion、Styled-Components或其他 CSS-in-JS 库，而完全放弃样式加载器的做法相当普遍。因此，使用react-colorful需要修改构建配置，以便这些用户能够访问默认样式。

此外，许多组件库和 UI 工具包都是 CSS-in-JS 独有的，因此仅使用 CSS 的方法使得选择器难以兼容。

👩‍🎤 为什么不直接使用现有的 CSS-in-JS 解决方案？

在我的上一篇文章中，我提到react-colorful的目标是成为一个零依赖包，我们不想通过添加 CSS-in-JS 框架（例如 Emotion）来改变这一点。

整个react-colorful大约占用 2 KB 空间，但安装 emotion 会使包的大小增加近 7 倍。当然，也有一些小型的 CSS-in-JS 库，比如goober，占用空间大约 1KB，但由于我们的样式不是动态的，所以我们觉得不需要整个库。

对我们来说，在其他开发人员的项目上安装额外的依赖项似乎是不合理的。

🗜 最小的解决方案

为了实现我们的目标，我们决定找到一种简单的方法将样式注入页面，就像 CSS-in-JS 库所做的那样。

我使用Microbundle构建我的开源项目，并且非常喜欢它。它是一款零配置的微型模块打包器，由 Rollup 提供支持。

大多数打包工具（包括 Microbundle）都会将处理后的样式以 CSS 文件的形式保存到磁盘。由于我们希望使用 JS 格式的样式，我们咨询了Microbundle（以及其他许多著名项目的作者）的作者 Jason Miller，请他提供一种方法，将处理后的 CSS 作为字符串导入到 JavaScript 中。他慷慨地为 Microbundle 添加了一个新的选项：

// with the default external CSS:
import "./foo.css";  // generates a minified .css file in the output directory

// with `microbundle --css inline`:
import css from "./foo.css";
console.log(css);  // the generated minified stylesheet string

没有必要使用 Microbundle；您可以使用任何您想要的构建工具，只需确保阅读文档以正确配置它。

然后我们创建了一个简单的钩子，它会创建一个<style>包含组件样式的标签。组件首次渲染时，这个钩子会将标签附加到<head>。

import { useLayoutEffect } from "react"
import styles from "../css/styles.css";

let styleElement;

const useStyleSheet = () => {
  useLayoutEffect(() => {
    if (typeof document !== "undefined" && !styleElement) {
      styleElement = document.head.appendChild(document.createElement("style"));
      styleElement.innerHTML = styles;
    }
  }, []);
};