import Code from 'components/Code'
import Table, { Row, Column } from 'components/Table'

### `styled`

This is the default export.
This is a low-level factory we use to create the `styled.tagname` helper methods.

<Table head={['Arguments', 'Description']}>
  <Row>
    <Column>
      1. <Code>component</Code> / <Code>tagname</Code>
    </Column>
    <Column>
      Either a valid react component or a tagname like <Code>'div'</Code>.
    </Column>
  </Row>
</Table>

Returns a function that accepts a tagged template literal and turns it into a `StyledComponent`.

```react
// import styled from 'styled-components'

const Button = styled.button`
  background: #BF4F74;
  border-radius: 3px;
  border: none;
  color: white;
`

const TomatoButton = styled(Button)`
  background: tomato;
`

render(
  <>
    <Button>I'm purple.</Button>
    <br />
    <TomatoButton>I'm red.</TomatoButton>
  </>
)
```

You can see this method being introduced in the [Getting started](/docs/basics#getting-started) section.