개발하자

18번의 반응과 활자체를 가진 감정

Cuire 2023. 6. 6. 20:28
반응형

18번의 반응과 활자체를 가진 감정

react 18, typescript 및 emotion 11을 사용하여 create-react-app을 사용하려고 하면 소품이 작동하지 않습니다. 요소는 여전히 스타일이 지정되어 있으며 DOM에서 요소의 값은 다음과 같습니다:

함수에서 반환된 개체를 문자열화하려고 했습니다. 그것은 직접적으로 (예를 들어, 소품의 가치로) 사용되는 것이 아니라 (예를 들어, 소품의 가치로) 그것을 다룰 수 있도록 감정에 전달된다.

새 프로젝트를 설정하여 복제할 수 있습니다:

npx create-react-app test-ts-emotion --template typescript
cd test-ts-emotion 
npm i --save @emotion/react

그러면 나는 다음과 같이 편집한다:

import React from 'react';
import { css } from '@emotion/react';

function App() {
  return (
    <div css={css`background-color: red`}>
      Hello, tester.
    </div>
  );
}

export default App;

그리고 나는 다음을 추가한다:

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "jsxImportSource": "@emotion/react"
  },
  "include": [
    "src"
  ]
}

그럼에도 불구하고, CSS 프롭은 작동하지 않는다. (요소는 스타일이 없으며 위의 메시지를 DOM 속성의 값으로 받는다.):

screenshot of error with DOM inspector

에서 이 설정을 확인할 수 있습니다. 제가 팔로우한 것 같은데 뭔가 누락된 것 같습니다. 잘 부탁드립니다!



나처럼 를 사용하는 경우 모든 파일의 맨 위에 명시적 구성을 추가해야 합니다:

/** @jsxImportSource @emotion/react */

이 솔루션은 에서 참조되고 확인됩니다. 그것은 궁극적으로 버그입니다. 에 수정 사항이 있지만, 1년 이상 전에 제출되었으며 페이스북에서 아무도 그것을 보려고 하지 않았기 때문에, 나는 그것이 통합될 수 있을지 의심스럽다.



답변이 조금 늦었지만 관련이 있습니다. tsconfig.json 구성을 유지하고 프로젝트에 NPM 종속성을 추가할 수 있습니다:

npm i @emotion/babel-preset-css-prop --save-dev

마지막으로 다음과 같이 에 구성을 추가합니다:

{ "presets": [ "@emotion/babel-preset-css-prop" ] }

추신: 미니멀 리액트 18 + 타입스크립트 + 감정 템플릿에 대한 레포토:-


반응형