vite에서 감정 CSS 소품을 사용하는 방법.

감정이 있는 요소의 스타일을 지정하는 기본 방법은 css prop입니다.

const Component = () => {
  return (
    <div
      css={{
        backgroundColor: "hotpink",
        "&:hover": {
          color: "lightgreen",
        },
      }}
    >
      This has a hotpink background.
    </div>
  );
};

1. 종속성 설치

초대 프로젝트에서 css prop을 사용하려면 먼저 설치하십시오@emotion/babel-plugin.

yarn add -D @emotion/babel-plugin

2. vite.config.js 업데이트

여기서 @emotion/babel-plugin를 @vitejs/plugin-react babel 옵션에 추가합니다. 또한 css prop을 사용하려면 vite에게 jsx를 jsxImportSource로 설정하여 Emotion의 @emotion/react 기능을 사용하도록 지시해야 합니다.

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [
    react({
      jsxImportSource: "@emotion/react",
      babel: {
        plugins: ["@emotion/babel-plugin"],
      },
    }),
  ],
});

이제 react 앱에서 css prop을 사용할 수 있습니다.

타입스크립트

프로젝트에서 TypeScript를 사용하는 경우 먼저 "jsxImportSource": "@emotion/react" 파일에 tsconfig.json를 추가합니다.

{
  "compilerOptions": {
    // ...
    "jsxImportSource": "@emotion/react"
  }
}

그런 다음 typed css prop을 사용하려면 vite-env.d.ts를 업데이트하십시오.

/// <reference types="vite/client" />
/// <reference types="@emotion/react/types/css-prop" />