Guides

Styling your components

Edit this page

Solid provides flexible and versatile ways to style your components. class and style bindings can both be added to dynamically style components with plain CSS. Solid also supports a range of styling methods - from traditional CSS preprocessors to modern CSS-in-JS solutions - ensuring the flexibility to choose the best approach for your projects.


CSS preprocessors

SASS LESS


CSS modules


CSS-in-JS

CSS-in-JS is a modern approach to styling components. Within the Solid ecosystem, there are various libraries and solutions available for working with CSS-in-JS, including but not limited to:

CSS-in-JS libraries often come with their own set of APIs and methods for defining, updating, and applying styles dynamically. Many also offer features like theming, media queries, and server-side rendering support right out of the box.

Note: Before choosing a CSS-in-JS library, it is recommended to check its compatibility with Solid.

Macaron


CSS frameworks

CSS frameworks provide pre-styled components and utility classes to speed up development.

Report an issue with this page