CSS and styling
Edit this pageSolidStart 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:
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:
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.
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.
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.