styled-components-vs-css-prop.js

// styled component version
const Container = styled.div`
  /*all of the styles*/
`
function MyComponent() {
  return <Container>{/*other stuff*/}</Container>
}


// css prop version
function MyComponent() {
  return (
    <div css={css`
      /*all of the styles*/
    `}>
      {/*other stuff*/}
    </div>
  )
}

// if you really want you can move the css declaration below or in a different file
function MyComponent() {
  return (
    <div css={containerCss}>
      {/*other stuff*/}
    </div>
  )
}

const containerCss = css`
  /*all of the styles*/
`