๐Ÿ’…

Styled Components

reacttypescript

Basic component

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.

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:

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