SolidJS 实现动态 Class 样式切换

在 SolidJS 中，可以使用动态 Class 的方式来改变元素的样式。

例如，假设我们有一个按钮元素：

<button class='btn'>Click me</button>

我们可以使用 SolidJS 来动态修改它的 Class：

import { createSignal } from 'solid-js';

function App() {
  const [isActive, setActive] = createSignal(false);

  const btnClass = () => {
    if (isActive()) {
      return 'btn active';
    } else {
      return 'btn';
    }
  };

  return (
    <button class={btnClass()} onClick={() => setActive(!isActive())}>
      Click me
    </button>
  );
}

在上面的代码中，我们使用了一个 signal 来存储按钮的状态。根据按钮的状态，我们返回不同的 Class，以实现动态 Class 的效果。

当按钮被点击时，我们通过调用 setActive 函数来更新按钮的状态，从而重新计算 Class，实现动态修改样式的效果。