💅 Styled Components

On this page

Basic component Jump to heading

import styled from 'styled-components'

interface ComponentProps {}

export const Component = styled.div<ComponentProps>``

    

Tip Jump to heading

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: Jump to heading

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

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

    

---

← Back home