/
๐Ÿ’…

Styled Components

reacttypescript
Table of contents
  • Basic component

Basic component

ts
import styled from 'styled-components'
interface ComponentProps {}
export const Component = styled.div<ComponentProps>``

Tip

You can get the props at the top of the component so you don't have to do it in every property that needs them, avoiding all the copy pasting.

js
import styled, { css } from 'styled-components'
// ๐Ÿ‘Ž instead ofgetting the props in every line:
const Post = styled.article`
font-size: ${(props) => props.theme.fontSizes.md};
color: ${(props) => props.theme.colors.bodyText};
`
// ๐Ÿ‘ get them once at the root to make your code cleaner
const Post = styled.article`
${({ theme }) =>
css`
font-size: ${theme.fontSizes.md};
color: ${theme.colors.bodyText};
`}
`

h/t twitter.com/Nikkita...74089990

Even better version:

js
import styled, { css } from 'styled-components'
const Post = styled.article({ theme }) => css`
font-size: ${theme.fontSizes.md};
color: ${theme.colors.bodyText};
`)
Want to make your own site like this? Try gatsby-theme-code-notes by Zander Martineau.
Notes on code. My second brain, by Zander Martineau.