[emotion] 스타일링 2개 이상 적용

👎 ${css}

이 방식은 적용할 수는 있으나 불편하다. 기존에 스타일링에 backgroundColor: #eee가 있는 상태에서 base를 추가하려 하면, backgroundColor의 이름을 background-color로 변경해줘야 한다. 만약 배경 색상이 아닌 다른 스타일링이 더 있다면? 아주 귀찮다. 정말 귀찮다. 다시는 안 쓸 것이다 🤮

const base = css`
  color: hotpink;
`

render(
  <div
    css={css`
      ${base};
      background-color: #eee;
    `}
  >
    This is hotpink.
  </div>
)

이 방식을 실제 코드에 적용해보았다. emotion은 선언된 순서대로 적용되기 때문에 변수 선언 위치를 고려해야 한다. 예를 들어 underlineCss에서 padding-top: 1rem;이 선언되어 있다면 실제 적용되는 것은 뒤에 선언된 padding-top: 1.625rem;이 된다. 그래서 userInputCss와 같이 변수로 선언된 스타일링의 위치가 중요한데, 중간에 변수가 섞여있으면 가독성이 좋지 않다.

const userInputCss: CssObject = { color:theme.colors['grey-60'], '::placeholder':{ color:theme.colors['grey-90'] } };

...

      <div css={css`${underlineCss}; padding-top: 1.625rem;
        padding-bottom: 1.375rem;`}>

➡️ Emotion의 Composition

👍 ...css

ES6에 있는 ...(spread operator)을 사용할 수 있다. 기존에 있는 emotion 선언 방식에서 변경할 필요없다. 바로 이것이지.

      <div css={{ paddingTop: '1.625rem',
        paddingBottom: '1.375rem',
        ...underlineCss }}>

➡️ Emotion의 Nested Selector