Solid Styling

SolidJS Styling

Complete guide to styling SolidJS components. Choose from CSS preprocessors, CSS Modules, utility frameworks, or CSS-in-JS solutions.

Basic Styling

Class Binding

import { createSignal } from "solid-js";

function Component() {
  const [active, setActive] = createSignal(false);

  return (
    <button
      class="btn"
      classList={{ active: active() }}
      => setActive(!active())}
    >
      Click me
    </button>
  );
}

Style Binding

function Component() {
  const [color, setColor] = createSignal("red");

  return (
    <div style={{ color: color(), "font-size": "16px" }}>
      Styled content
    </div>
  );
}

CSS Modules

Scoped CSS with automatic class name hashing.

Setup

// Component.module.css
.button {
  padding: 10px;
  background: blue;
}

.active {
  background: red;
}

Usage

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

function Component() {
  return (
    <button class={styles.button}>
      Click me
    </button>
  );
}

Benefits:

• Scoped styles
• No naming conflicts
• Type-safe (with TypeScript)
• Automatic class hashing

Tailwind CSS

Utility-first CSS framework.

Setup

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

tailwind.config.js:

export default {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

Usage

function Component() {
  return (
    <div class="flex items-center justify-center p-4 bg-blue-500">
      <button class="px-4 py-2 bg-white rounded hover:bg-gray-100">
        Click me
      </button>
    </div>
  );
}

Features:

• Utility classes
• Responsive design
• Dark mode
• Custom configuration

Sass/Less

CSS preprocessors for advanced styling.

Sass Setup

npm install -D sass

Component.scss:

$primary-color: blue;

.button {
  padding: 10px;
  background: $primary-color;

  &:hover {
    background: darken($primary-color, 10%);
  }
}

Usage:

import "./Component.scss";

function Component() {
  return <button class="button">Click me</button>;
}

Less Setup

npm install -D less

Component.less:

@primary-color: blue;

.button {
  padding: 10px;
  background: @primary-color;
}

CSS-in-JS

Macaron

Type-safe CSS-in-JS for Solid.

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

const Button = styled("button", {
  base: {
    padding: "10px",
    background: "blue",
  },
  variants: {
    size: {
      small: { padding: "5px" },
      large: { padding: "20px" },
    },
  },
});

function Component() {
  return <Button size="large">Click me</Button>;
}

Other CSS-in-JS Libraries

• Solid Styled Components
• Solid Styled JSX
• Vanilla Extract (with adapter)

UnoCSS

Atomic CSS engine.

Setup

npm install -D unocss

uno.config.ts:

import { defineConfig } from "unocss";

export default defineConfig({
  // ...
});

Usage

function Component() {
  return (
    <div class="flex items-center p-4">
      <button class="btn-primary">Click me</button>
    </div>
  );
}

Global Styles

Import Global CSS

// app.tsx or entry-client.tsx
import "./styles.css";

export default function App() {
  return <div>App</div>;
}

CSS Variables

/* styles.css */
:root {
  --primary-color: blue;
  --spacing: 16px;
}

.button {
  background: var(--primary-color);
  padding: var(--spacing);
}

Component-Scoped Styles

CSS Modules (Recommended)

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

Scoped Styles with Build Tools

Vite automatically handles scoped styles when using <style scoped>:

function Component() {
  return (
    <>
      <div class="container">Content</div>
      <style>{`
        .container {
          padding: 20px;
        }
      `}</style>
    </>
  );
}

Dynamic Styling

Conditional Classes

function Component() {
  const [active, setActive] = createSignal(false);

  return (
    <button
      class="btn"
      classList={{
        active: active(),
        disabled: !active(),
      }}
    >
      Click me
    </button>
  );
}

Dynamic Styles

function Component() {
  const [width, setWidth] = createSignal(100);

  return (
    <div
      style={{
        width: `${width()}px`,
        transition: "width 0.3s",
      }}
    >
      Content
    </div>
  );
}

Best Practices

1. Choose the right solution:

   • CSS Modules: Scoped styles, type safety
   • Tailwind: Rapid development, utility-first
   • Sass/Less: Advanced features, variables
   • CSS-in-JS: Dynamic styles, theming

2. Use CSS Modules for components:

   • Prevents naming conflicts
   • Better performance
   • Type safety

3. Use Tailwind for utilities:

   • Rapid prototyping
   • Consistent design
   • Small bundle size (with purging)

4. Organize styles:

   • Component-level: CSS Modules
   • Global: Separate CSS file
   • Utilities: Tailwind/UnoCSS

5. Optimize for production:

   • Purge unused CSS
   • Minify CSS
   • Use CSS variables for theming

Common Patterns

Theming

/* styles.css */
[data-theme="dark"] {
  --bg-color: #000;
  --text-color: #fff;
}

[data-theme="light"] {
  --bg-color: #fff;
  --text-color: #000;
}

function Component() {
  const [theme, setTheme] = createSignal("light");

  return (
    <div data-theme={theme()}>
      <button => setTheme(theme() === "light" ? "dark" : "light")}>
        Toggle theme
      </button>
    </div>
  );
}

Responsive Design

Tailwind:

<div class="text-sm md:text-base lg:text-lg">
  Responsive text
</div>

CSS:

.container {
  padding: 10px;
}

@media (min-width: 768px) {
  .container {
    padding: 20px;
  }
}

Summary

• CSS Modules: Scoped, type-safe styles
• Tailwind: Utility-first framework
• Sass/Less: Preprocessors with advanced features
• CSS-in-JS: Dynamic, component-based styles
• Global styles: Import CSS files
• Dynamic styling: Use classList and style bindings