# All files / src/chap05 EmotionJsx.js

0% Statements 0/2
100% Branches 0/0
0% Functions 0/1
0% Lines 0/2

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67

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

    export default function EmotionJsx() {
      const styles = css`
        width: 300px;
        padding: 10px;
        border: 1px solid #000;
        border-radius: 5px;
        background-color: royalblue;
        color: white;
      `;

      return (
        <div css={styles}><b>Styled JSX</b>는 JSX 표현식에 스타일 정의를 삽입하는 형식의 라이브러리입니다.</div>
      );
    }

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

    // export default function EmotionJsx() {
    //   const styles = css({
    //     width: 300,
    //     padding: 10,
    //     border: '1px solid #000',
    //     borderRadius: 5,
    //     backgroundColor: 'royalblue',
    //     color: 'white',
    //   });

    //   const others = css({
    //     height: 150
    //   });

    //   return (
    //     <div css={[styles, others]}><b>Styled JSX</b>는 JSX 표현식에 스타일 정의를 삽입하는 형식의 라이브러리입니다.</div>
    //   );
    // }

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

    // export default function EmotionJsx() {
    //   const styles = css({
    //     width: 300,
    //     padding: 10,
    //     border: '1px solid #000',
    //     borderRadius: 5,
    //     backgroundColor: 'royalblue',
    //     color: 'white',
    //   });

    //   const plus = css`
    //     ${styles}
    //     margin: 20px;
    //   `;

    //   return (
    //     <div css={plus}><b>Styled JSX</b>는 JSX 표현식에 스타일 정의를 삽입하는 형식의 라이브러리입니다.</div>
    //   );
    // }