[react/javascript]EmotionCSS react 설치 및 테스트

[react/javascript]EmotionCSS react 설치 및 테스트

 

 

#설치

npm i @emotion/css @emotion/react @emotion/styled

 

#테스트 및 코드 - 기본

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

const color = 'white'

render(
  <div
    css={css`
      padding: 32px;
      background-color: hotpink;
      font-size: 24px;
      border-radius: 4px;
      &:hover {
        color: ${color};
      }
    `}
  >
    Hover to change color.
  </div>
)

 

#테스트 및 코드 - styled

/** @jsxImportSource @emotion/react */
import styled from '@emotion/styled'

const Button = styled.button`
  padding: 32px;
  background-color: hotpink;
  font-size: 24px;
  border-radius: 4px;
  color: black;
  font-weight: bold;
  &:hover {
    color: white;
  }
`

render(<Button>This my button component.</Button>)

 

 

#emotion/react #emotion/css #emotion/style #react #css