# All files / src/chap05 StyledProps.js

0% Statements 0/4
0% Branches 0/2
0% Functions 0/3
0% Lines 0/4

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

     import styled from 'styled-components';

    const MyPanel = styled.div`
      width: 300px;
      padding: 10px;
      border: 1px solid #000;
      color: white;
      border-radius: ${ props => (props.theme.radius ? '10px' : '0px') };
      background-color: ${ props => props.theme.color };
    `;

    export default function StyledProps({ theme }) {
      return (
        <MyPanel theme={{
          radius: true,
          color: 'royalblue'
        }}><b>Styled JSX</b>는 JSX 표현식에 스타일 정의를 삽입하는 형식의 라이브러리입니다.</MyPanel>
      );
    }