A component that uses some theme variables from ThemeProvider

Component1.tsx

import styled from 'styled-components'

const PrimaryButton = styled.button`
  background-color: ${({theme}) => theme.colors.primary};
  border: 0;
  margin-bottom: ${({theme}) => theme.spacings.md};
`

const Component1 = () => {

  return <>
    <h1>Below there will be a button that is using the primary colors from our theme</h1>
    <PrimaryButton>Click me</PrimaryButton>
    <p>There is some margin above me</p>  
  </>
}

export default Component1