React - Emotion

Emotion의 장점

• component로 만들어 재사용
• 중복되는 className 해결 (Global namespace)
• 자바스크립트에서 쓰이는 상수, props, 함수 공유하기
• 상속에 의한 영향이 없도록 격리 (Isolation)
• 미사용 코드 처리 (Dead Code Elimination)
• Styled Components 보다 조금 가볍다고 한다.

npm install @emotion/styled @emotion/react

 

일단 전체적으로 Styled-Components 처럼사용 가능하다.

import styled from '@emotion/styled';

export const Header = styled.header`
  text-align: center;
  font-family: Slack-Larsseit, Helvetica Neue, Helvetica, Segoe UI, Tahoma, Arial, sans-serif;
  font-weight: 700;
  font-size: 48px;
  line-height: 46px;
  letter-spacing: -0.75px;
  margin-top: 50px;
  margin-bottom: 50px;
    &:focus {
    --saf-0: rgba(var(--sk_highlight, 18, 100, 163), 1);
    box-shadow: 0 0 0 1px var(--saf-0), 0 0 0 5px rgba(29, 155, 209, 0.3);
  }
`;

 

아래처럼 css 바로 주기도 가능하다.

npm install @emotion/css

  return (
    <main>
      <h1>Todo List</h1>
      {newItemSection}
      {content}
      <StDiv />
      <div className={css(divStyle)}></div>
    </main>
  );
};

export default TodoList;

const divStyle = css`
  width: 100px;
  height: 100px;
  background-color: hotpink;
`;