Css Prop

css prop | v4

Sometimes you don't want to create an extra component just to apply a bit of styling. The css prop is a convenient way to iterate on your components without settling on fixed component boundaries yet. It works on both normal HTML tags as well as components, and supports everything any styled component supports, including adapting based on props, theming and custom components.

To enable support for the css prop you have to use the Babel plugin.

<div
  css={`
    background: papayawhip;
    color: ${props => props.theme.colors.text};
  `}
/>
<Button
  css="padding: 0.5em 1em;"
/>

Under the hood, the Babel plugin turns any element with a css prop into a styled component. For example, the above code becomes:

import styled from 'styled-components';

const StyledDiv = styled.div`
  background: papayawhip;
  color: ${props => props.theme.colors.text};
`

const StyledButton = styled(Button)`
  padding: 0.5em 1em;
`

<StyledDiv />
<StyledButton />

Note that you don't even have to add the import, the Babel plugin does that automatically!

Usage with TypeScript

To prevent TypeScript errors on the css prop on arbitrary elements, install @types/styled-components and add the following import once in your project:

import {} from 'styled-components/cssprop'

See https://github.com/DefinitelyTyped/DefinitelyTyped/issues/31245#issuecomment-446011384 for more information.

If you're using a higher version than v6, you do not need to install @types/styled-components. Instead, you can directly import the CSSProp in your project like this:

import {} from 'react'
import type { CSSProp } from 'styled-components'

declare module 'react' {
  interface Attributes {
    css?: CSSProp | undefined
  }
}