Emotion inline-CSS

생성일

Dec 6, 2021 08:01 AM

태그

Emotion

작성자

해결 완료

🔥 배경

협업을 하다 보면, 원래 있던 컴포넌트에서 조금 변형해야 할 일들이 생긴다.

이를 해결하기 위해 새로운 속성을 추가하는 것은 생산성에서도, 또한 협업에서도 좋지 않다고 판단하였다. (잘못하면, 기존 동작과 상이한 컴포넌트 결과가 나올 수 있기 때문)

그렇다면, 인라인으로 CSS를 전달하되, style과 같이 우선순위가 높은 스타일링으로 적용되지 않도록 하면 어떻게 해야 할까?

⭐ 해결 방법

해답은 Emotion 공식 문서에서 찾았다.


import { css } from '@emotion/react'

const color = 'darkgreen'

render(
  <div
    css={css`
      background-color: hotpink;
      &:hover {
        color: ${color};
      }
    `}
  >
    This has a hotpink background.
  </div>

이를 다음과 같이 작성한다.


const TextCSS = css`
  background: hotpink;
`;

// ...

<Text size="medium" css={TextCSS}>
  CSS TEXT !
</Text>

👏🏻 참고자료

https://emotion.sh/docs/css-prop