💅Styled Components

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 of getting 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 https://twitter.com/NikkitaFTW/status/1262423045874089990

Even better version:

import styled, { css } from 'styled-components'

const Post = styled.article(
  ({ theme }) => css`
    font-size: ${theme.fontSizes.md};
    color: ${theme.colors.bodyText};
  `
)