CSS 和样式

SolidStart 是一个基于标准的框架，它不是修改<style> 标签的行为，而是致力于在其基础上进行构建。

组件样式

Vite 为复杂 Web 应用程序的 CSS 管理提供了一种简单的方法。它通过允许用户在组件树中的任何位置使用 ESM 语法导入 CSS 来实现这一点。例如，你可以在组件文件的同级文件中编写CSS：

src/
├── components/
│   ├── Card.tsx
│   ├── Card.css

要在组件中使用 CSS，你可以在 Card.css 文件中定义 CSS，并在 Card.tsx 文件中导入它：

.card {
  background-color: #446b9e;
}

h1 {
  font-size: 1.5em;
  font-weight: bold;
}

p {
  font-size: 1em;
  font-weight: normal;
}

import "./Card.css";

const Card = (props) => {
  return (
    <div class="card">
      <h1>{props.title}</h1>
      <p>{props.text}</p>
    </div>
  );
};

用于作用域样式的 CSS 模块

SolidStart 还支持 Vite 的 CSS 模块。通过 CSS 模块，你可以将特定的 CSS 限定在一个组件范围内，并在多个组件中使用 CSS 类来实现不同的样式。

要使此功能正常工作，.css 文件必须使用 .module.css 扩展名命名。这种约定也适用于 .scss 和 .sass 文件，它们可以分别使用 .module.scss 和 .module.sass 扩展名命名。

.card {
  background-color: #446b9e;
}

div.card > h1 {
  font-size: 1.5em;
  font-weight: bold;
}

div.card > p {
  font-size: 1em;
  font-weight: normal;
}

首次使用 CSS 模块时，在组件中尝试使用 class 属性时会遇到错误。这是因为在底层，CSS 模块中定义的类会被重命名为一系列随机字母。当使用 class 属性硬编码类时（class="card"），Solid 不知道它应该将 card 重命名为其他内容。

要解决这个问题，你可以导入 CSS 模块中使用的类。导入对象可以被视为 humanClass: generatedClass，在组件中，键名（即元素上的类）用于获取唯一的生成类名。

import styles from "./Card.module.css";

const Card = (props) => {
  return (
    <div class={styles.card}>
      <h1>{props.title}</h1>
      <p>{props.text}</p>
    </div>
  );
};

其他方式

SolidStart 是建立在 Solid 之上的，这意味着样式不仅限于 CSS。要了解其他组件样式方法，请参阅 Solid 文档中的样式章节。