How to use @emotion/styled-base - 10 common examples

interface Magazine {
    kind: 'magazine'
    issue: number
  }

  type SomethingToRead = Book | Magazine

  const Readable: React.SFC = props => {
    if (props.kind === 'magazine') {
      return <div>magazine #{props.issue}</div>
    }

    return <div>magazine #{props.author}</div>
  }

  const StyledReadable = styled(Readable)`
    font-size: ${props =&gt; (props.kind === 'book' ? 16 : 14)};
  `
  ;
  ;
  ; // $ExpectError
  ; // $ExpectError
}

interface Props {
  prop: boolean
}
class ClassWithDefaultProps extends React.Component {
  static defaultProps = { prop: false }
  render() {
    return this.props.prop ?  : 
  }

// $ExpectError
;
// $ExpectError
;
// $ExpectError
;

const Button4 = styled(
  ReactClassComponent0
)`
  backgroundColor: ${props => props.theme.backColor}

  fontSize: ${5}px;
  color: ${props => props.primary}
`
const Button5 = styled(ReactSFC0)(props => ({
  color: props.primary
}))
;<div>
  
  
</div>
;<div>
  
  
</div>
// $ExpectError
;
// $ExpectError
;
// $ExpectError
;

;

interface PrimaryProps {
  readonly primary: string
}
/**
 * @desc
 * This function accepts `InnerProps`/`Tag` to infer the type of `tag`,
 * and accepts `ExtraProps` for user who use string style
 * to be able to declare extra props without using
 * `` styled('button')`...` ``, which does not supported in
 * styled-component VSCode extension.
 * If your tool support syntax highlighting for `` styled('button')`...` ``
 * it could be more efficient.
 */
const Button2 = styled<'button', PrimaryProps>('button')`
  fontsize: ${5}px;
  color: ${props => props.primary};
`
const Button3 = styled<'button', PrimaryProps>('button')(props => ({
  color: props.primary
}))
;<div>
  
  
</div>
;<div>
  
  
</div>
// $ExpectError
;

// $ExpectError
;
// $ExpectError
;

const Container5 = Container3.withComponent(ReactSFC2)
;
// $ExpectError
;
// $ExpectError
;
// $ExpectError
;

// $ExpectError
styled(ReactSFC2)()

/**
 * @todo
 * I wish we could raise errors for following two `withComponent`s.
 */
Container0.withComponent(ReactClassComponent2)
Container3.withComponent(ReactClassComponent2)

const StyledClass0 = styled(ReactClassComponent0)({})
declare const ref0_0: (element: ReactClassComponent0 | null) => void
declare const ref0_1: (element: ReactClassComponent1 | null) => void
declare const ref0_2: (element: HTMLDivElement | null) => void
;
// $ExpectError
;
// $ExpectError

// @flow
import styled from '@emotion/styled-base'
import { tags } from './tags'

// bind it to avoid mutating the original function
const newStyled = styled.bind()

tags.forEach(tagName => {
  newStyled[tagName] = newStyled(tagName)
})

export default newStyled

// @flow
import styled from '@emotion/styled-base'

declare var codegen: { $call: Function, require: string => RegExp }

const tags = codegen`
const htmlTagNames = require('html-tag-names')
const svgTagNames = require('svg-tag-names')
module.exports = JSON.stringify(htmlTagNames
.concat(svgTagNames)
.filter((tag, index, array) => array.indexOf(tag) === index))
`

// bind it to avoid mutating the original function
const newStyled = styled.bind(undefined)

tags.forEach(tagName => {
  newStyled[tagName] = newStyled(tagName)
})

export default newStyled

static defaultProps = { prop: false }
  render() {
    return this.props.prop ?  : 
  }
}
const StyledClassWithDefaultProps = styled(ClassWithDefaultProps)`
  background-color: red;
`
const classInstance = 

const FCWithDefaultProps = ({ prop }: Props) =>
  prop ?  : 
FCWithDefaultProps.defaultProps = {
  prop: false
}
const StyledFCWithDefaultProps = styled(FCWithDefaultProps)`
  background-color: red;
`
const fcInstance =

})
;<div>
  
  
</div>
;<div>
  
  
</div>

const Input0 = styled('input', {
  label: 'mystyle'
})`
  padding: 4px;
`
const Input1 = styled('input', {
  label: 'mystyle'
})({
  padding: '4px'
})
;
;
const Input2 = Button0.withComponent('input')

const Canvas0 = styled('canvas', {
  shouldForwardProp(propName) {
    return propName === 'width' || propName === 'height'
  }
})`
  width: 200px;
`
const Canvas1 = styled('canvas', {

py={4}
    as="header"
    position="relative"
    fontSize="xl"
    fontWeight="semibold"
    {...props}
  />
);

const ModalFooter = props => (
  
);

const ModalBody = props => ;

const StyledDialogOverlay = styled(DialogOverlay)(systemProps, extraConfig);

const ModalOverlay = forwardRef(
  ({ bg = "rgba(16,22,26,0.7)", zIndex, ...props }, ref) => (
    
  ),

import styled from '@emotion/styled-base'
import { Button } from 'components/atoms/Button'
import { isBold, Td, Tr } from 'components/atoms/ContentWrappers'
import { Contribution } from 'components/organisms/DefaultTable'
import { differenceInCalendarDays, isFuture, isPast } from 'date-fns'
import _ from 'lodash'
import React from 'react'
import intl from 'react-intl-universal'
import { mobileWidth } from 'styles/layout'
import { formatDateInWords } from 'utils/formatDate'

const ShowDetailButton = styled(Button)`
@media (max-width: ${mobileWidth}) {
width: 50px;
font-size: 10px;
height: 50px;
padding: 10px;
text-align: center;
}
`
type PropsType = {
    isProposalSubmitted?: boolean;
    isMyContribution?: boolean;
    isSponsorPaid?: boolean;
} & Contribution

export default class MyContributionTableRow extends React.Component {