CSS and Styling

SolidStart is a standards-based framework that, instead of modifying the behavior of the <style> tags, strives to build on top of it.

Styling components

Vite provides a simple way to manage CSS for complex web applications. It does this by allowing users to import CSS using ESM syntax anywhere within the component tree. For example, you can write CSS in a file accompanying your component file:

src/
├── components/
│   ├── Card.tsx
│   ├── Card.css

To use the CSS in the component, you can define the CSS in the Card.css file and import it in the Card.tsx file:

.card {
  background-color: #446b9e;
}

h1 {
  font-size: 1.5em;
  font-weight: bold;
}

p {
  font-size: 1em;
  font-weight: normal;
}

import "./Card.css";

const Card = (props) => {
  return (
    <div class="card">
      <h1>{props.title}</h1>
      <p>{props.text}</p>
    </div>
  );
};

CSS Modules for scoped styles

SolidStart also supports vite's CSS modules. Through CSS modules, you can scope certain CSS to a component and use the CSS class in multiple components to style them differently.

For this feature to work, the .css file must be named with the .module.css extension. This convention also works for .scss and .sass files, which can be named with the .module.scss and .module.sass extensions, respectively.

.card {
  background-color: #446b9e;
}

div.card > h1 {
  font-size: 1.5em;
  font-weight: bold;
}

div.card > p {
  font-size: 1em;
  font-weight: normal;
}

When first using CSS modules, you will encounter an error when trying to use the class attribute in your components. This is because, behind the scenes, classes defined in CSS modules are renamed to a series of random letters. When classes are hard coded using the class attribute (class="card"), Solid is not aware that it should rename card to something different.

To fix this, you can import classes used in your CSS module. The import object can be thought of as humanClass: generatedClass and within the component, they key (ie. the class on the element) is used to get the unique, generated class name.

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

const Card = (props) => {
  return (
    <div class={styles.card}>
      <h1 class={styles.title}>{props.title}</h1>
      <p>{props.text}</p>
    </div>
  );
};

Other ways to style components

SolidStart is built on top of Solid, meaning styling is not limited to CSS. To see other ways to style components, see the styling section in the Solid documentation.