Portfolio


import styled from '@emotion/styled'

const Button = styled.button`
  color: hotpink;
`
let SomeComp = styled.div({
  color: 'hotpink'
})

render(<Button>This is a hotpink button.</Button>)


import Base from './Base";

const Box = styled(Base)`
	width: ...
`


text-decoration: ${()=>..}


text-decoration: ${({completed})=> (completed ? 'line-through' : 'none')}


/** @jsxImportSource @emotion/react */
..
<div
    css={{
      backgroundColor: 'hotpink',
      '&:hover': {
        color: 'lightgreen'
      }
    }}
  >
    This has a hotpink background.
  </div>


/** @jsxImportSource @emotion/react */
import { css } from '@emotion/react'

const color = 'darkgreen'

render(
  <div
    css={css`
      background-color: hotpink;
      &:hover {
        color: ${color};
      }
    `}
  >
    This has a hotpink background.
  </div>
)


import { css } from '@emotion/react'

const style1 = css`
  color: hotpink;
`
const style2 = css({
  textDecoration: 'underline'
})

const SomeComponent = ({ children }) => (
  <div css={style1}>
    Some hotpink text.
    {children}
  </div>
)