{"componentChunkName":"component---src-templates-blog-post-jsx","path":"/stitches","result":{"data":{"post":{"title":"Stitches","slug":{"current":"stitches"},"_rawBody":[{"_key":"eaa23bcd4ff3","_type":"block","children":[{"_key":"bfd72e5d20f3","_type":"span","marks":["d148334bfa00"],"text":"https://stitches.dev/"}],"markDefs":[{"_key":"d148334bfa00","_type":"link","href":"https://stitches.dev/"}],"style":"normal"},{"_key":"9161c106086b","_type":"block","children":[{"_key":"54e8eb82f7880","_type":"span","marks":[],"text":"An alternative to StyledComponents for styling React apps."}],"markDefs":[],"style":"normal"},{"_key":"5d7adbc2860d","_type":"block","children":[{"_key":"7257d1ff29b50","_type":"span","marks":[],"text":"I’m intrigued by this, especially the variants feature. I found the process of making components with several different variants in StyledComponents cumbersome. This seems like a great solution."}],"markDefs":[],"style":"normal"},{"_key":"d9fa60cbdc9d","_type":"code","code":"const Button = styled('button', {\r\n  borderRadius: '9999px',\r\n  fontSize: '15px',\r\n  lineHeight: '1',\r\n  fontWeight: 500,\r\n  height: '35px',\r\n  paddingLeft: '15px',\r\n  paddingRight: '15px',\r\n  border: '0',\r\n\r\n  variants: {\r\n    color: {\r\n      violet: {\r\n        backgroundColor: 'blueviolet',\r\n        color: 'white',\r\n        ':hover': {\r\n          backgroundColor: 'darkviolet',\r\n        },\r\n      },\r\n      gray: {\r\n        backgroundColor: 'gainsboro',\r\n        ':hover': {\r\n          backgroundColor: 'lightgray',\r\n        },\r\n      },\r\n    },\r\n  },\r\n});\r\n\r\nrender(\r\n  <div style={{ display: 'flex', gap: '20px' }}>\r\n    <Button color=\"violet\">Button</Button>\r\n    <Button color=\"gray\">Button</Button>\r\n  </div>\r\n);","language":"javascript"}],"publishedAt":"2021-03-12T12:30:00.000Z","categories":[{"title":"Resources"}],"tags":[{"value":"React"},{"value":"styled components"},{"value":"css"},{"value":"styling"}],"mainImage":{"asset":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAANABQDASIAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAABwADCP/EACQQAAICAQMCBwAAAAAAAAAAAAECAwQABQYREyESIiMxQUJR/8QAFwEAAwEAAAAAAAAAAAAAAAAAAAECBP/EABsRAAIDAAMAAAAAAAAAAAAAAAECAAMhESJB/9oADAMBAAIRAxEAPwBE1vSW0zV1txv1YlHpov1b87YR7ipanPubq3o7cjTsWjR14AGdKW6gN8FHKAjxEAe5zC9WrtLHJNCkkg8oZh3GQ9YOmaKrWXqPYA0Ns6tfg6xgdOGKgAfAyxslkKyMsYCKp44GWCpkRsPM/9k=","aspectRatio":1.5,"src":"https://cdn.sanity.io/images/pwg13agp/production/5f5cb6a040c4c9cb6057de30c7e9620db80419d8-6000x4000.jpg?w=900&h=600&fit=crop","srcSet":"https://cdn.sanity.io/images/pwg13agp/production/5f5cb6a040c4c9cb6057de30c7e9620db80419d8-6000x4000.jpg?w=225&h=150&fit=crop 225w,\nhttps://cdn.sanity.io/images/pwg13agp/production/5f5cb6a040c4c9cb6057de30c7e9620db80419d8-6000x4000.jpg?w=450&h=300&fit=crop 450w,\nhttps://cdn.sanity.io/images/pwg13agp/production/5f5cb6a040c4c9cb6057de30c7e9620db80419d8-6000x4000.jpg?w=900&h=600&fit=crop 900w,\nhttps://cdn.sanity.io/images/pwg13agp/production/5f5cb6a040c4c9cb6057de30c7e9620db80419d8-6000x4000.jpg?w=1350&h=900&fit=crop 1350w,\nhttps://cdn.sanity.io/images/pwg13agp/production/5f5cb6a040c4c9cb6057de30c7e9620db80419d8-6000x4000.jpg?w=1800&h=1200&fit=crop 1800w,\nhttps://cdn.sanity.io/images/pwg13agp/production/5f5cb6a040c4c9cb6057de30c7e9620db80419d8-6000x4000.jpg?w=2700&h=1800&fit=crop 2700w,\nhttps://cdn.sanity.io/images/pwg13agp/production/5f5cb6a040c4c9cb6057de30c7e9620db80419d8-6000x4000.jpg 6000w","srcWebp":"https://cdn.sanity.io/images/pwg13agp/production/5f5cb6a040c4c9cb6057de30c7e9620db80419d8-6000x4000.jpg?w=900&h=600&fit=crop&fm=webp","srcSetWebp":"https://cdn.sanity.io/images/pwg13agp/production/5f5cb6a040c4c9cb6057de30c7e9620db80419d8-6000x4000.jpg?w=225&h=150&fit=crop&fm=webp 225w,\nhttps://cdn.sanity.io/images/pwg13agp/production/5f5cb6a040c4c9cb6057de30c7e9620db80419d8-6000x4000.jpg?w=450&h=300&fit=crop&fm=webp 450w,\nhttps://cdn.sanity.io/images/pwg13agp/production/5f5cb6a040c4c9cb6057de30c7e9620db80419d8-6000x4000.jpg?w=900&h=600&fit=crop&fm=webp 900w,\nhttps://cdn.sanity.io/images/pwg13agp/production/5f5cb6a040c4c9cb6057de30c7e9620db80419d8-6000x4000.jpg?w=1350&h=900&fit=crop&fm=webp 1350w,\nhttps://cdn.sanity.io/images/pwg13agp/production/5f5cb6a040c4c9cb6057de30c7e9620db80419d8-6000x4000.jpg?w=1800&h=1200&fit=crop&fm=webp 1800w,\nhttps://cdn.sanity.io/images/pwg13agp/production/5f5cb6a040c4c9cb6057de30c7e9620db80419d8-6000x4000.jpg?w=2700&h=1800&fit=crop&fm=webp 2700w,\nhttps://cdn.sanity.io/images/pwg13agp/production/5f5cb6a040c4c9cb6057de30c7e9620db80419d8-6000x4000.jpg?fm=webp 6000w","sizes":"(max-width: 900px) 100vw, 900px"}}}}},"pageContext":{"slug":"stitches"}},"staticQueryHashes":["63159454"]}