mirror of
https://github.com/Dvorinka/Devour.git
synced 2026-06-04 20:43:05 +00:00
Tomas Dvorak
17 lines
3.2 KiB
JSON
17 lines
3.2 KiB
JSON
{
|
|
"id": "a7d34eb5ed5a87274117c72a",
|
|
"source": "solid:signals",
|
|
"type": "github-document",
|
|
"title": "macaron",
|
|
"content": "---\ntitle: Macaron\norder: 4\nmainNavExclude: true\nuse_cases: \u003e-\n css-in-js styling, type-safe styles, styled components, variant-based styling,\n compile-time css\ntags:\n - styling\n - css-in-js\n - macaron\n - styled-components\n - typescript\n - variants\nversion: '1.0'\ndescription: \u003e-\n Style Solid components with Macaron's compile-time CSS-in-JS, offering\n type-safe styled components and variant-based styling.\n---\n\n[Macaron](https://macaron.js.org/) is compile-time CSS-in-JS library that offers type safety.\n\n## Installation\n\n1. Install and set up the macaron plugin for your bundler:\n\n```package-install\n@macaron-css/core @macaron-css/solid\n```\n\n2. Within your `vite.config.js` folder, add the macaron plugin prior to other plugins:\n\n```js\nimport { macaronVitePlugin } from \"@macaron-css/vite\";\nimport { defineConfig } from \"vite\";\n\nexport default defineConfig({\n\tplugins: [\n\t\tmacaronVitePlugin(),\n\t\t// other plugins\n\t],\n});\n```\n\n## Usage\n\n1. Import `styled` from `@macaron-css/solid` and create a styled component:\n\n```jsx\n// button.tsx\nimport { styled } from \"@macaron-css/solid\";\n\nconst Button = styled(\"button\", {});\n```\n\n2. Add styles that will be applied to the components by default:\n\n```jsx\nimport { styled } from \"@macaron-css/solid\";\n\nconst Button = styled(\"button\", {\n\tbase: {\n\t\tbackgroundColor: \"red\",\n\t\tborderRadius: \"10px\",\n\t},\n});\n```\n\nVariants can be added using the `variants` key:\n\n```jsx\nimport { styled } from \"@macaron-css/solid\";\n\nconst Button = styled(\"button\", {\n\tbase: {\n\t\tbackgroundColor: \"red\",\n\t\tborderRadius: \"10px\",\n\t},\n\tvariants: {\n\t\tcolor: {\n\t\t\tviolet: {\n\t\t\t\tbackgroundColor: \"violet\",\n\t\t\t},\n\t\t\tgray: {\n\t\t\t\tbackgroundColor: \"gray\",\n\t\t\t},\n\t\t},\n\t},\n});\n```\n\nAdditionally, the `defaultVariants` feature is set to `variants` by default. This can be overridden at the time of usage:\n\n```jsx\nimport { styled } from \"@macaron-css/solid\";\n\nconst Button = styled(\"button\", {\n\tbase: {\n\t\tbackgroundColor: \"red\",\n\t\tborderRadius: \"10px\",\n\t},\n\tvariants: {\n\t\tcolor: {\n\t\t\tviolet: {\n\t\t\t\tbackgroundColor: \"violet\",\n\t\t\t},\n\t\t\tgray: {\n\t\t\t\tbackgroundColor: \"gray\",\n\t\t\t},\n\t\t},\n\t},\n\tdefaultVariants: {\n\t\tcolor: \"blue\",\n\t},\n});\n```\n\nThese components can be used like any other Solid component, with type-safe props derived from your variants.\nFor more information on how to use macaron, visit their [documentation](https://macaron.js.org/docs/installation/).",
|
|
"url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/guides/styling-components/macaron.mdx",
|
|
"metadata": {
|
|
"path": "src/routes/guides/styling-components/macaron.mdx",
|
|
"repo": "solidjs/solid-docs",
|
|
"repo_url": "https://github.com/solidjs/solid-docs.git",
|
|
"size": 2376,
|
|
"source_type": "github"
|
|
},
|
|
"hash": "f770b8698548422fbe0a3b0bb2bc6b977be8eb30bebe6b0285ed882ddb3bff56",
|
|
"timestamp": "2026-02-23T11:43:00.188009051+01:00"
|
|
} |