작성한 질문수 5

0

안녕하세요! nyang님!

emotion을 사용하실 때 크게 3가지 방법이 있습니다!

1. emotion의 css를 활용하시는 방법

2. styled 태그를 활용하시는 방법

3. 위 1번과 2번을 결합하여 사용하는 방법!

1. emotion의 css를 활용

   import { css } from '@emotion/react' // 타입스크립트 사용시, tsconfig.json의
                                        // compilerOptions에 추가 설정 요함
                                        //jsxImportSource:"@emotion/react"
   const 나의스타일 = css`            
     background-color: red;        
   `;                              
   
   export default function MyPage(){          
      return <div css={나의스타일}>안녕하세요</div> 
   }                                          

2. styled 태그를 활용

   import styled from '@emotion/styled'
   
   const 나의컴포넌트 = styled.div`
     font-size: 30px;
   `;
   
   export default function MyPage(){
      return <나의컴포넌트>안녕하세요</나의컴포넌트>
   }

    

3. 위 1번과 2번을 결합

   import { css } from '@emotion/react'
   import styled from '@emotion/styled'
   
   const 나의스타일 = css`
     background-color: red;
   `;
   
   const 나의컴포넌트 = styled.div`
     font-size: 30px;
     ${나의스타일};
   `;
   
   export default function MyPage(){
      return <나의컴포넌트>안녕하세요</나의컴포넌트>
   }

따라서, 위 3번 예시를 적용 및 응용하시면 원하시는 결과를 얻을 수 있을 것 같네요!^^