import{_ as u,k as e,t as f,x as m,N as r,D as l,A as y}from"./index-DOvZ9ocE.js";var p=y('<div class="flex flex-col md:grid md:grid-cols-2 md:grid-rows-1 gap-3"><!$><!/><!$><!/>');function S(t){const n=Object.assign({p:"p",a:"a",code:"code",h2:"h2",ul:"ul",li:"li",strong:"strong",h3:"h3"},u(),t.components),{ImageLinks:i}=n;return i||b("ImageLinks"),[e(n.p,{get children(){return[`Solid provides flexible and versatile ways to style your components.
`,e(n.a,{href:"/concepts/components/class-style",get children(){return[e(n.code,{children:"class"})," and ",e(n.code,{children:"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.`]}}),`
`,e(n.h2,{id:"css-preprocessors",get children(){return e(n.a,{className:"heading",href:"#css-preprocessors",children:"CSS preprocessors"})}}),`
`,(()=>{var s=m(p),d=s.firstChild,[o,a]=r(d.nextSibling),c=o.nextSibling,[h,g]=r(c.nextSibling);return l(s,e(i,{title:"SASS",href:"/guides/styling-components/sass",logo:"sass"}),o,a),l(s,e(i,{title:"LESS",href:"/guides/styling-components/less",logo:"less"}),h,g),s})(),`
`,e(n.p,{children:`SASS
LESS`}),`
`,e(n.h2,{id:"css-modules",get children(){return e(n.a,{className:"heading",href:"#css-modules",children:"CSS modules"})}}),`
`,e(i,{title:"CSS Modules",href:"/guides/styling-components/css-modules",logo:"cssmodules"}),`
`,e(n.h2,{id:"css-in-js",get children(){return e(n.a,{className:"heading",href:"#css-in-js",children:"CSS-in-JS"})}}),`
`,e(n.p,{get children(){return[`CSS-in-JS is a modern approach to styling components.
Within the `,e(n.a,{href:"https://www.solidjs.com/ecosystem",children:"Solid ecosystem"}),", there are various libraries and solutions available for working with CSS-in-JS, including but not limited to:"]}}),`
`,e(n.ul,{get children(){return[`
`,e(n.li,{get children(){return e(n.a,{href:"https://github.com/solidjs/solid-styled-components",children:"Solid Styled Components"})}}),`
`,e(n.li,{get children(){return e(n.a,{href:"https://github.com/solidjs/solid-styled-jsx",children:"Solid Styled JSX"})}}),`
`]}}),`
`,e(n.p,{children:`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.`}),`
`,e(n.p,{get children(){return[e(n.strong,{children:"Note:"})," Before choosing a CSS-in-JS library, it is recommended to check its compatibility with Solid."]}}),`
`,e(n.h3,{id:"macaron",get children(){return e(n.a,{className:"heading",href:"#macaron",children:"Macaron"})}}),`
`,e(i,{title:"Macaron",href:"/guides/styling-components/macaron",logo:"macaron"}),`
`,e(n.h2,{id:"css-frameworks",get children(){return e(n.a,{className:"heading",href:"#css-frameworks",children:"CSS frameworks"})}}),`
`,e(n.p,{children:"CSS frameworks provide pre-styled components and utility classes to speed up development."}),`
`,(()=>{var s=m(p),d=s.firstChild,[o,a]=r(d.nextSibling),c=o.nextSibling,[h,g]=r(c.nextSibling);return l(s,e(i,{title:"TailwindCSS",href:"/guides/styling-components/tailwind",logo:"tailwind"}),o,a),l(s,e(i,{title:"UnoCSS",href:"/guides/styling-components/uno",logo:"uno"}),h,g),s})()]}function C(t={}){const{wrapper:n}=Object.assign({},u(),t.components);return n?e(n,f(t,{get children(){return e(S,t)}})):S(t)}function b(t,n){throw new Error("Expected component `"+t+"` to be defined: you likely forgot to import, pass, or provide it.")}export{C as default};