[짜잘한 react] 이모션 사용하기

emotion

1. sass 기반으로 사용하는 emotion 라이브러리

• 구조적으로 보기 편한함

.test{
	p{
    	color: blue;
    }
    div{
    	p{
        	color: red;
        }
    }
}

2. 설치하기

• https://emotion.sh/docs/introduction
• 이모션 설치 (3가지 모두 설치)

npm i @emotion/css

npm i @emotion/react

npm i @emotion/styled

3. src폴더에 Style 폴더 새로 생성, UploadCSS.js 파일 새로 만들기

• 그 안에서 요소들 스타일 작성 후 export 해주기

import styled from '@emotion/styled'

const UploadDiv = styled.div`
  width: 100%;
  margin-top: 1rem;
  margin-bottom: 1rem;
`
const UploadForm = styled.div`
  width: 80%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  input {
    border-radius: 10px;
    border: 1px solid #c6c6c6;
    padding: 10px;
    &:active,
    &:focus {
      outline: none;
    }
  }
  textarea {
    min-height: 350px;
    resize: none;
    border-radius: 10px;
    border: 1px solid #c6c6c6;
    padding: 10px;
    &:active,
    &:focus {
      outline: none;
    }
    &::-webkit-scrollbar {
      width: 10px;
    }
    &::-webkit-scrollbar-thumb {
      background-color: grey;
      border-radius: 15px;
      background-clip: padding-box;
      border: 2px solid transparent;
    }
    &::-webkit-scrollbar-track {
      background-color: #c6c6c6;
      border-radius: 15px;
      box-shadow: inset 0px 0px 5px whitesmoke;
    }
  }
  label {
    font-weight: bold;
    margin-top: 10px;
    margin-bottom: 5px;
  }
`
const UploadButtonDiv = styled.div`
  margin-top: 1rem;
  display: flex;
  justify-content: end;
  button {
    border-radius: 15px;
    padding: 5px 10px;
    background-color: black;
    color: white;
    border: solid 1px black;
    &:hover {
      background-color: white;
      color: black;
      border: solid 1px black;
    }
  }
`

export { UploadDiv, UploadForm, UploadButtonDiv }

4. 파일에서 가져다 쓰기

import { UploadDiv, UploadForm, UploadButtonDiv } from '../Style/UploadCSS'

...
return (
    <UploadDiv>
      <UploadForm>
        <label htmlFor="title">제목</label>
        <input
          id="title"
          type="text"
          value={Content}
          onChange={(event) => {
            setContent(event.currentTarget.value)
          }}
        />
        <label htmlFor="content">내용</label>
        <textarea
          id="content"
          type="text"
          value={Content}
          onChange={(event) => {
            setContent(event.currentTarget.value)
          }}
        />
        <UploadButtonDiv>
          <button
            onClick={() => {
              onSubmit()
            }}
          >
            제출!
          </button>
        </UploadButtonDiv>
      </UploadForm>
    </UploadDiv>
  )