Стили

Стили в Solid пишутся на обычном CSS. Сборщик Vite подключает CSS-файлы, импортированные из компонентов, а Solid даёт удобные атрибуты, чтобы менять классы и стили в зависимости от сигналов.

Обычный CSS-файл

Создайте файл src/components/TodoItem.css:

/* src/components/TodoItem.css */
.todo {
  padding: 8px 12px;
  border-bottom: 1px solid #ddd;
}
 
.done {
  color: #888;
  text-decoration: line-through;
}

Импортируйте его в компоненте и укажите класс атрибутом class:

// src/components/TodoItem.jsx
import './TodoItem.css';
 
export default function TodoItem(props) {
  return <li class="todo">{props.title}</li>;
}

Пункты списка получают отступы и разделительную линию. Классы из такого файла глобальные: .todo подействует на любой элемент страницы с этим классом.

classList

classList принимает объект: ключ — имя класса, значение — включён ли он. Классы переключаются реактивно:

// src/components/TodoItem.jsx
import './TodoItem.css';
 
export default function TodoItem(props) {
  return (
    <li class="todo" classList={{ done: props.done }} onClick={props.onToggle}>
      {props.title}
    </li>
  );
}

Использование: <TodoItem title="Купить молоко" done={true} />. У выполненной задачи появляется класс done, и текст становится серым и зачёркнутым.

style

Атрибут style принимает строку или объект. В объекте имена свойств пишутся как в CSS, через дефис, а значения — строками с единицами:

// src/components/Progress.jsx
export default function Progress(props) {
  return (
    <div style={{ background: '#eee', height: '8px' }}>
      <div style={{ width: `${props.percent}%`, height: '100%', 'background-color': 'green' }} />
    </div>
  );
}

<Progress percent={40} /> нарисует полосу, заполненную на 40 процентов.

CSS-модули

Файл с окончанием .module.css — CSS-модуль: Vite делает имена его классов уникальными, чтобы они не пересекались с другими компонентами. Такой файл, src/App.module.css, уже есть в шаблоне.

// src/components/TodoItem.jsx
import styles from './TodoItem.module.css';
 
export default function TodoItem(props) {
  return <li class={styles.todo}>{props.title}</li>;
}

В браузере у элемента будет класс вроде _todo_1x2ab_1, а стили из TodoItem.module.css подействуют только на этот компонент.

Способы оформления

Частая ошибка

Писать className и свойства в camelCase по привычке React:

// src/components/Progress.jsx
export default function Progress(props) {
  // Неправильно: className и backgroundColor
  // return <div className="bar" style={{ backgroundColor: 'green' }} />;
  return <div class="bar" style={{ 'background-color': 'green' }} />;
}

В Solid атрибут называется class, а в объекте style используются имена свойств CSS, как в обычной таблице стилей.