Components

Class 与 style

与 HTML 类似，Solid 使用 class 和 style 属性通过 CSS（层叠样式表）设置元素的样式。

Class 属性：通过 CSS 规则设置一个或多个元素的样式。
Style 属性：为单个元素设置内联样式。

内联样式

style 属性允许您设置单个元素的样式并在运行时动态定义 CSS 变量。要使用它，您可以传递字符串或对象。

// String
<div style="color: red;">This is a red div</div>

// Object
<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更具可读性和声明性。

Info:

混合使用 class和classlist可能会导致意外错误。比如当 class 值更改时如果两者都是响应式的，Solid 将设置整个 class 属性，这将删除 classList 设置的任何类。

为了避免这种情况，class 属性应设置为静态字符串或者不设置，或者可以将 class 设置为静态计算值（例如 class={baseClass()}），但必须将其放到 classList 属性之前。

此外，由于 classList 是伪属性，因此它不会在 <div {...props} /> 或在 <Dynamic> 中生效。

关于如何设置组件样式，请参阅设置组件样式，其中我们介绍了设置组件样式的不同方法，比如使用 TailwindCSS 等库。

报告此页面问题