Emotionjs로 스타일이 지정된 구성 요소

Index.css를 사용하는 데 지쳤습니다. Emotionjs를 사용해 보세요!

Emotionjs가 무엇인가요?

Emotionjs는 Javascript로 css를 작성할 수 있게 해주는 라이브러리입니다.

스타일이 지정된 구성 요소

사이트 스타일을 지정하는 한 가지 방법은 스타일이 지정된 구성 요소를 사용하는 것입니다.

import React, { useState } from "react"
import styled from 'styled-components'

function Todoform(){
return (
        <FormDiv>
            <TitleP onClick={HandleClickFive}>Have Something More To-do?</TitleP>
            <form onSubmit={handleHandlerSubmit}>
                <p><TaskInput onChange={handleChange} type="text" name="task" placeholder="Task"></TaskInput></p>
                <p><TaskInput onChange={handleChange} type="text" name="category" placeholder="Category"></TaskInput></p>
                <SubmitButton type="submit">Add New Task</SubmitButton>
            </form>
        </FormDiv>
    )
}

const FormDiv = styled.div`
background-color: darkgray;
padding: 20px;
background-size: 100%
`

const TaskInput = styled.input`
width: 70%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
`
const TitleP = styled.p`
font-size: 30px;
`

const SubmitButton = styled.button`
border-radius: 12px;
background-color: black;
color: white;
width: 150px;
height: 50px;
`

이를 통해 내 양식을 사용자 지정하기 위해 내 파일 내에 구성 요소를 만들 수 있었습니다. 위에서 볼 수 있듯이 구성 요소를 만든 다음 일반 자바 스크립트 요소 대신 사용했습니다. 구성 요소에 대한 별도의 파일을 만들어 코드로 가져올 수도 있습니다. 코드 전체에서 특정 요소의 스타일을 동일하게 지정하려는 경우 이 기능을 사용하면 정말 편리합니다.

CSS 소품 사용

Emotionjs를 사용하는 또 다른 방법은 CSS를 소품으로 사용하는 것입니다.

import React from 'react'
import { jsx } from '@emotion/react'

render(
  <div
    css={{
      backgroundColor: 'forestgreen',
        color: 'white'

    }}
  >
    This has a green background.
  </div>
)

css prop을 사용하여 div 내부의 텍스트 줄을 편집할 수 있었습니다. 이렇게 하면 코드 라인 내에서 스타일을 직접 편집할 수 있습니다.

Emotionjs로 할 수 있는 일이 훨씬 더 많지만 이 게시물에서는 다루지 않겠습니다. 여기Emotionjs에서 문서를 확인하십시오.