How to use the rebass.Button function in rebass

background-color: ${c('primary')};
  cursor: pointer;
  &:focus, &:active, &:hover {
      outline: 0;
      box-shadow: none;
  }
  &:hover {
      background-color: ${c('primary2')}
  }
`

export const CustomButton = styled(R.Button)`
  border: 3px solid red;
`

export const SquareButton = styled(R.Button)`
  width: 100px;
  height: 100px;
  color: white;
  background-color: black;
  border-radius: 0;
  cursor: pointer;
  border: 4px solid black;
  &:hover {
    color: #f66;
    border: 4px solid #900;
  }
  &:focus {
    outline: 0;
    color: red;
    box-shadow: none;
    border: 4px solid red;

import * as R from 'rebass'
import styled from 'styled-components'

const c = (color) => (props) => props.theme.colors[color]

export const Button = styled(R.Button)`
  background-color: ${c('primary')};
  cursor: pointer;
  &:focus, &:active, &:hover {
      outline: 0;
      box-shadow: none;
  }
  &:hover {
      background-color: ${c('primary2')}
  }
`

export const CustomButton = styled(R.Button)`
  border: 3px solid red;
`

export const SquareButton = styled(R.Button)`