markdown 情感片段

Posted 2021-05-06

## Emotion snippets
Emotion docs: https://github.com/emotion-js/emotion#documentation

### Importing
```js
import styled, {
  css,
  sheet,
  injectGlobal,
  keyframes,
  fontFace
} from 'react-emotion'
```

### Basic example
```js
import React from 'react'
import styled from 'react-emotion'
import { ds } from '../../theme'

const FooterEl = styled('footer')`
  text-align: center;
  margin-top: ${ds.spacing(3)};
`

const Footer = () => {
  return (
    <FooterEl>
      Made by <a href="https://zander.wtf">Zander</a>
    </FooterEl>
  )
}

export default Footer
```

### Using props
```js
const ButtonCSS = (props) => css`
  display: ${props.block ? 'block' : 'inline-block'};
  width: ${props.block ? '100%' : 'auto'};
```

### Using [design-system-utils](https://github.com/mrmartineau/design-system-utils)
```js
export const FormGroup = styled('div')`
  margin-top: ${ds.spacing(2)};
  margin-bottom: ${ds.spacing(2)};
  display: ${props.horizontal ? 'flex' : 'block'};

<FormGroup></FormGroup>
```
[Codesandbox](https://codesandbox.io/s/91kjlxnm0p) example

### Extending styles
```js
import styled, {
  css,
} from 'react-emotion'

const buttonCSS = css`
  cursor: pointer;
  border: none;
  margin: 0;
  border-radius: ${ds.get('borderRadius')};
  font-weight: ${ds.get('type.fontWeight.bold')};
`

export const Button = styled('button')`${buttonCSS};`

export const LinkButton = Button.withComponent('a')

<Button></Button>
<LinkButton></LinkButton>
```
See more of this example in [this Codesandbox](https://codesandbox.io/s/vz443k475)