How to use the rebass.Box.extend function in rebass

const A = styled(props =>
  )`
  display: block;
  transition: color .1s ease-out;
  &:hover {
    color: magenta;
  }
`

Box.x = Box.extend`
  @media screen and (max-width: 48em) {
    display: none;
  }
`

const quarter = Math.ceil(components.length / 4)
const comps = {}
comps.a = components.slice(0, quarter)
comps.b = components.slice(quarter, quarter * 2)
comps.c = components.slice(quarter * 2, quarter * 3)
comps.d = components.slice(quarter * 3)

class Menu extends React.Component {
  constructor () {
    super()
    this.state = {

const A = styled(props =>
  )`
  display: block;
  transition: color .1s ease-out;
  &:hover {
    color: ${themeGet('colors.blue')};
  }
`

Box.hide = Box.extend`
  @media screen and (max-width: ${themeGet('breakpoints.0')}) {
    display: none;
  }
`

class Sidebar extends React.Component {
  render () {
    const {
      update,
      menu,
      location: {
        pathname
      } = {},
    } = this.props

    return (