Solid.js 最新官方文档翻译（17）—— 组件样式

冴羽
204 阅读8分钟

前言

Solid.js，一个比 React 更 react 的框架。每一个使用 React 的同学，你可以不使用，但不应该不了解。

目前 Solid.js 发布了最新的官方文档，但却缺少对应的中文文档。为了帮助大家学习 Solid.js，为爱发电翻译文档。

我同时搭建了 Solid.js 最新的中文文档站点：solid.yayujs.com ，欢迎勘误。

虽说是翻译，但个人并不喜欢严格遵守原文，为了保证中文阅读流畅，会删减部分语句，对难懂的部分也会另做补充解释，希望能给大家带来一个好的中文学习体验。

欢迎围观我的“朋友圈”、加入“低调务实优秀中国好青年”前端社群，分享技术，带你成长。

组件样式

Solid 提供了灵活且通用的方式来设计组件的样式。 class 和 style 绑定可以修改样式，此外， Solid 还支持一系列修改样式的方法：从传统的 CSS 预处理器到现代 CSS-in-JS 解决方案，确保为您的项目灵活选择最佳方法。

CSS 预处理器

SASS

SASS 是一种流行的 CSS 预处理器，它使 CSS 创作变得更加容易。它是 CSS 的超集，提供两种语法：SCSS 和缩进语法（通常简称为“SASS”）。

安装

安装依赖项：

// npm
npm i --save-dev sass

// yarn
yarn add --dev sass

// pnpm
pnpm add --save-dev sass

// bun 
add --dev sass

转换文件扩展名

安装后， .css 文件扩展名必须更改为 .scss 或 .sass 。 .scss 语法是 CSS 的严格超集，而 .sass 提供更宽松的语法。 Vite 与 Solid 集成，两者都支持。但是，通常建议使用 .scss。

// Card.scss 
.grid {
  display: grid;
  &-center {
    place-items: center;
  }
}
.screen {
  min-height: 100vh;
}
.card {
  height: 160px;
  aspect-ratio: 2;
  border-radius: 16px;
  background-color: white;
  box-shadow: 0 0 0 4px hsl(0 0% 0% / 15%);
}

在 Solid 组件中：

import "./card.scss";

function Card() {
  return (
    <>
      <div class="grid grid-center screen">
        <div class="card">Hello, world!</div>
      </div>
    </>
  );
}

只需将文件扩展名从 .css 更改为 .scss 或 .sass ，Vite 就会自动识别这些文件，并按需将 SASS 编译为 CSS。在生产中构建时，所有 SASS 文件都会转换为 CSS。这确保了与大多数现代浏览器的兼容性。

LESS

LESS 是一个基于 JavaScript 的预处理器。它提供了使用 mixin、变量和其他编程工具的能力，使样式代码更清晰、更少冗余。

安装

安装依赖项：

// npm
npm i --save-dev less

// yarn
yarn add --dev less

// pnpm
pnpm add --dev less

// bun 
bun add --dev less

使用 LESS

首先在 src 目录中创建一个 .less 文件：

// styles.less
.foo {
  color: red;
}
.bar {
  background-color: blue;
}

LESS 的基本语法与 CSS 非常相似。然而，LESS 允许声明和使用变量：

// styles.less
@plainred: red;
@plainblue: blue;
.foo {
  color: @plainred;
}
.bar {
  background-color: @plainblue;
}

要在 Solid 组件中使用这些样式，请导入 .less 文件：

// component.jsx
import "./styles.less";

function Component() {
  return (
    <>
      <div class="foo bar">Hello, world!</div>
    </>
  );
}

通过将导入样式的文件扩展名更改为 .less ，Vite 会将其识别为 LESS 文件，并按需编译为 CSS。

CSS modules

CSS 模块是 CSS 文件，其中类名、动画和媒体查询默认在本地范围内。它们提供了一种将样式封装在组件内的方法，防止全局冲突并通过仅打包使用的选择器来优化最终输出。

创建 CSS 模块文件

首先创建 CSS 模块文件。通常，这些文件具有 .module.css 扩展名，例如 style.module.css 。但是，您也可以使用其他扩展，例如 .scss 和 .sass 。

// styles.module.css
.foo {
  color: red;
}
.bar {
  background-color: blue;
}

注意：避免在 CSS 模块中使用 HTML 标签。由于它们不被视为是纯选择器，因此可能会导致特异性问题，从而导致更难以用其他样式覆盖并导致意外行为。

在组件中使用模块

  1. 导入样式：在组件文件（例如 Component.jsx ）中，从 CSS 模块导入样式。
// component.jsx
import styles from "styles.module.css";
  1. 应用样式：通过将导入的样式引用为 JSX 中样式对象的属性来使用它们：
function Component() {
  return (
    <>
      <div class={`${styles.foo} ${styles.bar}`}>Hello, world!</div>
    </>
  );
}
  1. Using a single style: 如果您只需要模块中的一种样式，直接导入并应用它：
import styles from "styles.module.css";

function Component() {
  return (
    <>
      <div class={styles.foo}>Hello, world!</div>
    </>
  );
}
  1. 与常规类名混合使用：您还可以将 CSS 模块语法与常规字符串类名结合使用：
// component.jsx
import styles from "styles.module.css";

function Component() {
  return (
    <>
      <div class={`${styles.foo} container`}>Hello, world!</div>
    </>
  );
}

注意：如果你的样式名称中有中划线，使用括号语法：

const className = styles["foo-with-dash"];

CSS-in-JS

CSS-in-JS 是一种设计组件样式的现代方法。在 Solid 生态系统中，有各种库和解决方案可用于使用 CSS-in-JS，包括但不限于：

CSS-in-JS 库通常带有自己的一组 API 和方法，用于定义、更新和动态应用样式。许多还提供开箱即用的主题、媒体查询和服务器端渲染等功能。

注意：在选择 CSS-in-JS 库之前，建议检查其与 Solid 的兼容性。

Macaron

Macaron 是编译时 CSS-in-JS 库，提供类型安全。

安装

  1. 为您的打包器安装并设置 macaron 插件：
// npm
npm install @macaron-css/core @macaron-css/solid

// yarn
yarn add @macaron-css/core @macaron-css/solid

// pnpm
pnpm add @macaron-css/core @macaron-css/solid

// bun 
bun add @macaron-css/core @macaron-css/solid
  1. 在 vite.config.js 文件中，在其他插件之前添加 macaron 插件：
import { macaronVitePlugin } from "@macaron-css/vite";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [
    macaronVitePlugin(),
    // other plugins
  ],
});

用法

  1. 从 @macaron-css/solid 导入 styled 并创建一个样式组件：
// button.tsx
import { styled } from "@macaron-css/solid";

const Button = styled("button", {});
  1. 添加默认应用于组件的样式：
import { styled } from "@macaron-css/solid";

const Button = styled("button", {
  base: {
    backgroundColor: "red",
    borderRadius: "10px",
  },
});

可以使用 variants 键添加变体：

import { styled } from "@macaron-css/solid";

const Button = styled("button", {
  base: {
    backgroundColor: "red",
    borderRadius: "10px",
  },
  variants: {
    color: {
      violet: {
        backgroundColor: "violet",
      },
      gray: {
        backgroundColor: "gray",
      },
    },
  },
});

此外，defaultVariants默认设置为 variants，可以在使用时被覆盖：

import { styled } from "@macaron-css/solid";

const Button = styled("button", {
  base: {
    backgroundColor: "red",
    borderRadius: "10px",
  },
  variants: {
    color: {
      violet: {
        backgroundColor: "violet",
      },
      gray: {
        backgroundColor: "gray",
      },
    },
  },
  defaultVariants: {
    color: "blue",
  },
});

这些组件可以像任何其他 Solid 组件一样使用，并具有类型安全的 props。有关如何使用macaron 的更多信息，请访问他们的文档。

CSS 框架

CSS 框架提供预先设计样式的组件和实用工具类来加快开发速度。

TailwindCSS

Tailwind CSS 是一个按需使用的 CSS 工具库，作为内置 PostCSS 插件与 Solid 无缝集成。

安装

  1. 安装 Tailwind CSS 作为依赖项：
// npm
npm i --save-dev tailwindcss postcss autoprefixer

// yarn
yarn add --dev tailwindcss postcss autoprefixer

// pnpm
pnpm add --save-dev tailwindcss postcss autoprefixer

// bun 
bun add --save-dev tailwindcss postcss autoprefixer
  1. 接下来，运行 init 命令来生成 tailwind.config.js 和 postcss.config.js 。
// npm
npx tailwindcss init -p

// yarn
yarn dlx tailwindcss init -p

// pnpm
pnpm dlx tailwindcss init -p

// bun 
bunx tailwindcss init -p
  1. 由于 TailwindCSS 是配置驱动的，初始化后，将在项目目录的根目录下创建一个 tailwind.config.js 文件：
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

要更深入地了解配置，您可以查看 Tailwind 官方文档。

添加 Tailwind 指令

在您的 src/index.css 文件中，添加以下 Tailwind 指令：

@tailwind base;
@tailwind components;
@tailwind utilities;

这些指令通知 PostCSS 您正在使用 Tailwind 并确定指令的顺序。您可以在这些指令下方附加自定义 CSS。

导入 TailwindCSS

将 index.css 文件导入到根 index.jsx 或 index.tsx 文件中：

import { render } from "solid-js/web"
import App from "./App"
import "./index.css"

render(() => <App />, document.getElementById('root') as HTMLElement);

用法

设置 Tailwind CSS 后，您现在可以使用它的实用工具类。例如，如果您以前有一个 Card.css 文件，您可以替换或删除它：

// src/components/Card.css
/* Remove or replace these styles with Tailwind utility classes */

使用 Tailwind 工具类更新您的组件：

// src/components/Card.jsx
function Card() {
  return (
    <div class="grid place-items-center min-h-screen">
      <div class="h-[160px] aspect aspect-[2] rounded-[16px] shadow-[0_0_0_4px_hsl(0_0%_0%_/_15%)]">
        Hello, world!
      </div>
    </div>
  );
}

支持

如需其他帮助，请参阅 Tailwind CSS/Vite 集成指南 。

UnoCSS

UnoCSS 是一个按需使用 CSS 工具库，作为 Vite 插件与 Solid 无缝集成。

安装 Vite 插件

// npm
npm i --save-dev unocss

// yarn
yarn add --dev unocss

// pnpm
pnpm add --save-dev unocss

// bun 
bun add --save-dev unocss

导入 Vite 插件

安装后，打开 vite.config.js 或 vite.config.ts 。默认的 Solid Vite 配置如下所示：

import { defineConfig } from "vite";
import solidPlugin from "vite-plugin-solid";

export default defineConfig({
  plugins: [solidPlugin()],
  server: {
    port: 3000,
  },
  build: {
    target: "esnext",
  },
});

现在，从“unocss/vite”导入 unocssPlugin 并将其添加到插件数组中：

import { defineConfig } from "vite";
import unocssPlugin from "unocss/vite";
import solidPlugin from "vite-plugin-solid";

export default defineConfig({
  plugins: [unocssPlugin(), solidPlugin()],
  server: {
    port: 3000,
  },
  build: {
    target: "esnext",
  },
});

确保 unocssPlugin 排在 solidPlugin 之前，以防止出现某些边缘 case。

导入 UnoCSS

在根 index.jsx 或 index.tsx 文件中，导入 UnoCSS：

/* @refresh reload */
import "uno.css"
import { render } from "solid-js/web"
import "./index.css"
import App from "./App"

render(() => <App />, document.getElementById('root') as HTMLElement);

或者，您可以使用别名 import "virtual:uno.css" ：

/* @refresh reload */
import "virtual:uno.css"
import { render } from "solid-js/web"
import "./index.css"
import App from "./App"

render(() => <App />, document.getElementById('root') as HTMLElement);

支持

如需其他帮助，请参阅 UnoCSS/Vite 集成指南 。

Solid.js 中文文档

本篇已收录在掘金专栏 《Solid.js 中文文档》，该系列一共 25 篇。下一篇：Solid.js 最新官方文档翻译（18）—— 状态管理

此外我还写过 JavaScript 系列、TypeScript 系列、React 系列、Next.js 系列、VuePress 博客搭建系列等 14 个系列文章， 全系列文章目录：github.com/mqyqingfeng…

通过文字建立交流本身就是一种缘分，欢迎围观我的“朋友圈”、加入“低调务实优秀中国好青年”前端社群，分享技术，带你成长。

avatar
文章
阅读
粉丝