前言
Solid.js，一个比 React 更 react 的框架。每一个使用 React 的同学，你可以不使用，但不应该不了解。
目前 Solid.js 发布了最新的官方文档，但却缺少对应的中文文档。为了帮助大家学习 Solid.js，故有此系列。
我同时搭建了 Solid.js 最新的中文文档站点：solid.yayujs.com ，欢迎勘误。
虽说是翻译，但个人并不喜欢严格遵守原文，为了保证中文阅读流畅，会删减部分语句，对难懂的部分也会另做补充解释，希望能给大家带来一个好的中文学习体验。
欢迎围观朋友圈、加入低调务实优秀中国好青年前端社群，一个人走得快，一群人走得远。
组件 Class 与 Style
与 HTML 类似，Solid 使用 class 和 style 属性通过 CSS（层叠样式表）设置元素的样式。
- Class 属性：通过 CSS 规则设置一个或多个元素的样式。
- Style 属性：为单个元素设置内联样式。
内联样式
style 属性允许您设置单个元素的样式并在运行时动态定义 CSS 变量。要使用它，您可以传递字符串或对象。
// 字符串
<div style="color: red;">This is a red div</div>
// 对象
<div style={{ color: "red" }}>This is a red div</div>
使用对象时，键代表 CSS 属性名称，值代表 CSS 属性值。键必须是连接号格式，值必须是字符串。
虽然内联样式对于快速原型设计很有用，但不建议用于生产用途。这是因为它们不可复用，并且随着时间推移可能变得难以维护。
Classes
class 属性允许您通过 CSS 规则设置一个或多个元素的样式。它提供了一种更加结构化的添加样式的方法，因为它允许您在多个元素间复用样式。
Class 在 CSS 文件中定义，然后将其导入到需要使用的组件文件中。您可以使用组件文件顶部的 import 语句导入这些文件。一旦导入到组件中，Class 的范围就限于该组件及其任何子组件。
import "./Card.css";
function Card() {
// ...
}
动态样式
动态样式提供了一种根据状态或其他因素（例如用户输入）更改组件样式的方法。这对于创建可以适应不同场景的组件非常有用，而无需创建同一组件的多个版本：
const [theme, setTheme] = createSignal("light");
<div class={theme() === "light" ? "light-theme" : "dark-theme"}>
This div's theme is determined dynamically!
</div>;
Props 是改变样式的另一种方式。通过将 props 传递给组件，您可以根据组件的使用情况或其接收的数据调整样式：
function ThemedButton(props) {
return (
<button class={props.theme}>
{props.theme === "light" ? "Light Button" : "Dark Button"}
</button>
);
}
classList
当您想将多个类名应用于一个元素时，可以使用 classList 属性。要使用它，您可以传递一个字符串或一个对象，其中键代表类名，值代表布尔表达式。当值为 true 时，应用该类名；当 false 时，删除该类名。
const [current, setCurrent] = createSignal("foo");
<button
classList={{ "selected" : current() === "foo" }}
onClick={() => setCurrent("foo")}
>
foo
</button>;
在处理多个条件类时，classList 通常比 class 更有效。这是因为 classList 会有选择地仅切换需要更改的类名，而 class 每次都会重新评估。对于单个条件类，使用 class 可能更简单，但随着条件类数量的增加，classList更具可读性和声明性。
注意：
混合使用
class和classlist可能会导致意外错误。比如当 class 值更改时如果两者都是响应式的，Solid 将设置整个 class 属性，这将删除 classList 设置的任何类。为了避免这种情况，class 属性应设置为静态字符串或者不设置，或者可以将 class 设置为静态计算值（例如
class={baseClass()}），但必须将其放到classList属性之前。此外，由于 classList 是伪属性，因此它不会在
<div {...props} />或在<Dynamic>中生效。
关于如何设置组件样式，请参阅设置组件样式 ，其中我们介绍了设置组件样式的不同方法，比如使用 TailwindCSS 等库。
