Emotion

1
$ npm i @emotion/styled @emotion/react

1
import './App.css'
2
import EmotionExample from './components/EmotionExample/EmotionExample'
3
// import StyledComponentsExample from './components/StyledComponentsExample/StyledComponentsExample';
4

5
export default function App() {
6
  return (
7
    <div className="App">
8
      <EmotionExample />
9
      {/* <StyledComponentsExample /> */}
10
    </div>
11
  )
12
}

1
// src/components/EmotionExample/EmotionExample.jsx
2
/** @jsxImportSource @emotion/react */
3
import { css } from '@emotion/react'
4
import styled from '@emotion/styled'
5

6
const Button = styled.button`
7
  padding: 32px;
8
  background-color: hotpink;
9
  font-size: 24px;
10
  border-radius: 4px;
11
  color: black;
12
  font-weight: bold;
13
  &:hover {
14
    color: white;
15
  }
16
`
17

18
const color = 'white'
19

20
const style = css`
21
  color: hotpink;
22
`
23

24
const SomeComponent = ({ children }) => (
25
  <div css={style}>
26
    Some hotpink text.
27
    {children}
28
  </div>
29
)
30

31
const anotherStyle = css({
32
  textDecoration: 'underline',
33
})
34

35
const P = props => (
36
  <p
37
    css={{
38
      margin: 0,
39
      fontSize: 12,
40
      lineHeight: '1.5',
41
      fontFamily: 'Sans-Serif',
42
      color: 'black',
43
    }}
44
    {...props} // <- props contains the `className` prop
45
  />
46
)
47

48
const ArticleText = props => (
49
  <P
50
    css={{
51
      fontSize: 14,
52
      fontFamily: 'Georgia, serif',
53
      color: 'darkgray',
54
    }}
55
    {...props} // <- props contains the `className` prop
56
  />
57
)
58

59
const AnotherComponent = () => <div css={[anotherStyle, style]}>Some text with an underline.</div>
60

61
const danger = css`
62
  color: red;
63
`
64

65
const base = css`
66
  background-color: darkgreen;
67
  color: turquoise;
68
`
69

70
export default function EmotionExample() {
71
  return (
72
    <>
73
      <div
74
        css={css`
75
          padding: 32px;
76
          background-color: hotpink;
77
          font-size: 24px;
78
          border-radius: 4px;
79
          &:hover {
80
            color: ${color};
81
          }
82
        `}
83
      >
84
        Hover to change color.
85
      </div>
86
      <Button>Hello</Button>
87
      <SomeComponent />
88
      <AnotherComponent />
89
      <P>PPPPP</P>
90
      <ArticleText>Article</ArticleText>
91
      <div>
92
        <div css={base}>This will be turquoise</div>
93
        <div css={[danger, base]}>
94
          This will be also be turquoise since the base styles overwrite the danger styles.
95
        </div>
96
        <div css={[base, danger]}>This will be red</div>
97
      </div>
98
    </>
99
  )
100
}

1
// src/components/EmotionExample/EmotionExample.jsx
2
/** @jsxImportSource @emotion/react */
3
import { css } from '@emotion/react'
4

5
export default function EmotionExample() {
6
  return (
7
    <>
8
      <p
9
        css={css`
10
          font-size: 30px;
11
          @media (min-width: 420px) {
12
            font-size: 50px;
13
          }
14
        `}
15
      >
16
        Some text!
17
      </p>
18
    </>
19
  )
20
}

1
// src/components/EmotionExample/EmotionExample.jsx
2
/** @jsxImportSource @emotion/react */
3
import { Global, css } from '@emotion/react'
4

5
export default function EmotionExample() {
6
  return (
7
    <>
8
      <p
9
        css={css`
10
          font-size: 30px;
11
          @media (min-width: 420px) {
12
            font-size: 50px;
13
          }
14
        `}
15
      >
16
        <Global
17
          styles={css`
18
            p {
19
              color: hotpink !important;
20
            }
21
          `}
22
        />
23
        Some text!
24
      </p>
25
      <p>Hello, world!</p>
26
    </>
27
  )
28
}

1
// src/components/EmotionExample/EmotionExample.jsx
2
/** @jsxImportSource @emotion/react */
3
import { Global, css, keyframes } from '@emotion/react'
4

5
const bounce = keyframes`
6
  from, 20%, 53%, 80%, to {
7
    transform: translate3d(0,0,0);
8
  }
9

10
  40%, 43% {
11
    transform: translate3d(0, -30px, 0);
12
  }
13

14
  70% {
15
    transform: translate3d(0, -15px, 0);
16
  }
17

18
  90% {
19
    transform: translate3d(0,-4px,0);
20
  }
21
`
22

23
export default function EmotionExample() {
24
  return (
25
    <>
26
      <p
27
        css={css`
28
          font-size: 30px;
29
          @media (min-width: 420px) {
30
            font-size: 50px;
31
          }
32
        `}
33
      >
34
        <Global
35
          styles={css`
36
            p {
37
              color: hotpink !important;
38
            }
39
          `}
40
        />
41
        Some text!
42
      </p>
43
      <p>Hello, world!</p>
44
      <div
45
        css={css`
46
          animation: ${bounce} 2s ease infinite;
47
        `}
48
      >
49
        some bouncing text!
50
      </div>
51
    </>
52
  )
53
}

1
// src/components/EmotionExample/EmotionExample.jsx
2
/** @jsxImportSource @emotion/react */
3
import { Global, css, keyframes, ClassNames } from '@emotion/react'
4

5
const bounce = keyframes`
6
  from, 20%, 53%, 80%, to {
7
    transform: translate3d(0,0,0);
8
  }
9

10
  40%, 43% {
11
    transform: translate3d(0, -30px, 0);
12
  }
13

14
  70% {
15
    transform: translate3d(0, -15px, 0);
16
  }
17

18
  90% {
19
    transform: translate3d(0,-4px,0);
20
  }
21
`
22

23
// this might be a component from npm that accepts a wrapperClassName prop
24
let SomeComponent = props => (
25
  <div className={props.wrapperClassName}>
26
    in the wrapper!
27
    <div className={props.className}>{props.children}</div>
28
  </div>
29
)
30

31
export default function EmotionExample() {
32
  return (
33
    <>
34
      <p
35
        css={css`
36
          font-size: 30px;
37
          @media (min-width: 420px) {
38
            font-size: 50px;
39
          }
40
        `}
41
      >
42
        <Global
43
          styles={css`
44
            p {
45
              color: hotpink !important;
46
            }
47
          `}
48
        />
49
        Some text!
50
      </p>
51
      <p>Hello, world!</p>
52
      <div
53
        css={css`
54
          animation: ${bounce} 2s ease infinite;
55
        `}
56
      >
57
        some bouncing text!
58
      </div>
59
      <ClassNames>
60
        {({ css, cx }) => (
61
          <SomeComponent
62
            wrapperClassName={css({ color: 'green' })}
63
            className={css`
64
              color: hotpink;
65
            `}
66
          >
67
            from children!!
68
          </SomeComponent>
69
        )}
70
      </ClassNames>
71
    </>
72
  )
73
}