CSS-in-js중 하나인 Emotion을 사용해보자.

"dependencies": {
    "@emotion/babel-plugin": "^11.10.0",
    "@emotion/babel-preset-css-prop": "^11.10.0",
    "@emotion/react": "^11.10.0",
 }

npm으로 위의 3가지 패키지를 설치해주자.

Emotion 사용방식

function App() {
  return (
    <>
      <h1>컴포넌트 입니다.</h1>
			// 복사 붙여넣기한다.
      <div css={HelpButton}>이건뭐냐</div>
    </>
  );
}

// 스타일을 선언한다음.
const HelpButton = css`
  background-color: hotpink;
`;

Babel 설정

{
  "presets": [
    [
      "@babel/preset-react",
      { "runtime": "automatic", "importSource": "@emotion/react" }
    ],
    [
      "@babel/preset-env",
      {
        "modules": false,
        "useBuiltIns": "usage",
        "corejs": 3
      }
    ],
    "@babel/preset-typescript"
  ],
  "plugins": ["@emotion/babel-plugin"]
}