mirror of
https://github.com/Dvorinka/Devour.git
synced 2026-06-03 20:13:03 +00:00
Tomas Dvorak
17 lines
3.2 KiB
JSON
17 lines
3.2 KiB
JSON
{
|
|
"id": "7c840352253cb9eece2b70b9",
|
|
"source": "solid:signals",
|
|
"type": "github-document",
|
|
"title": "styling-your-components",
|
|
"content": "---\ntitle: Styling your components\norder: 1\nuse_cases: \u003e-\n styling components, choosing css solutions, css frameworks, preprocessors,\n css-in-js\ntags:\n - styling\n - css\n - preprocessors\n - css-in-js\n - frameworks\nversion: '1.0'\ndescription: \u003e-\n Explore Solid's flexible styling options: CSS preprocessors, CSS Modules,\n CSS-in-JS, and utility frameworks for component styling needs.\n---\n\nSolid provides flexible and versatile ways to style your components.\n[`class` and `style` bindings](/concepts/components/class-style) can both be added to dynamically style components with plain CSS.\nSolid 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.\n\n## CSS preprocessors\n\n\u003cdiv class=\"flex flex-col md:grid md:grid-cols-2 md:grid-rows-1 gap-3\"\u003e\n\n\u003cImageLinks title=\"SASS\" href=\"/guides/styling-components/sass\" logo=\"sass\" /\u003e\n\u003cImageLinks title=\"LESS\" href=\"/guides/styling-components/less\" logo=\"less\" /\u003e\n\n\u003c/div\u003e\n\nSASS\nLESS\n\n## CSS modules\n\n\u003cImageLinks\n\ttitle=\"CSS Modules\"\n\thref=\"/guides/styling-components/css-modules\"\n\tlogo=\"cssmodules\"\n/\u003e\n\n## CSS-in-JS\n\nCSS-in-JS is a modern approach to styling components.\nWithin the [Solid ecosystem](https://www.solidjs.com/ecosystem), there are various libraries and solutions available for working with CSS-in-JS, including but not limited to:\n\n- [Solid Styled Components](https://github.com/solidjs/solid-styled-components)\n- [Solid Styled JSX](https://github.com/solidjs/solid-styled-jsx)\n\nCSS-in-JS libraries often come with their own set of APIs and methods for defining, updating, and applying styles dynamically.\nMany also offer features like theming, media queries, and server-side rendering support right out of the box.\n\n**Note:** Before choosing a CSS-in-JS library, it is recommended to check its compatibility with Solid.\n\n### Macaron\n\n\u003cImageLinks\n\ttitle=\"Macaron\"\n\thref=\"/guides/styling-components/macaron\"\n\tlogo=\"macaron\"\n/\u003e\n## CSS frameworks\n\nCSS frameworks provide pre-styled components and utility classes to speed up development.\n\n\u003cdiv class=\"flex flex-col md:grid md:grid-cols-2 md:grid-rows-1 gap-3\"\u003e\n\n\u003cImageLinks\n\ttitle=\"Tailwind CSS\"\n\thref=\"/guides/styling-components/tailwind\"\n\tlogo=\"tailwind\"\n/\u003e\n\u003cImageLinks title=\"UnoCSS\" href=\"/guides/styling-components/uno\" logo=\"uno\" /\u003e\n\n\u003c/div\u003e",
|
|
"url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/guides/styling-your-components.mdx",
|
|
"metadata": {
|
|
"path": "src/routes/guides/styling-your-components.mdx",
|
|
"repo": "solidjs/solid-docs",
|
|
"repo_url": "https://github.com/solidjs/solid-docs.git",
|
|
"size": 2386,
|
|
"source_type": "github"
|
|
},
|
|
"hash": "b03109e0bf78d1fd8e1748206087f0fcc7101008c6f689d1f209e66f13eb98bf",
|
|
"timestamp": "2026-02-23T11:43:00.188203076+01:00"
|
|
} |