[React] Emotion CSS(인라인) 사용하려면 주석을 이용(CRA)

error message  You are loading @emotion/react when it is already loaded. Running multiple instances may cause problems. This can happen if multiple versions are used, or if multiple builds of the same version are used.   You have tried to stringify object returned from css function. It isn't supposed to be used directly (e.g. as value of the className prop), but rather handed to emotion so it can handle it (e.g. as value of css prop). .. HTML 에서 CSS 적용했지만 안된 코드 보니 You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle   태그에 들어가져 있었음

 

아래처럼 작성했으나 적용 안됨

import { css, jsx } from '@emotion/react';
...
<div
    css={css`
      display: flex;
      justify-content: flex-end;
    `}
>

 

검색 후

babel.config.js

module.exports = {
  presets: [
    '@babel/preset-env',
    [
      '@babel/preset-react',
      { runtime: 'automatic', importSource: '@emotion/react' },
    ],
    ['@emotion/babel-preset-css-prop'],
  ],
  plugins: ['@emotion/babel-plugin'],
};

 

craco.config.js

module.exports = {
..
 babel: {
    presets: ['@emotion/babel-preset-css-prop'],
    plugins: [...emotionBabelPreset.plugins],
  },

 

package.json(없는건 추가설치)

"@emotion/babel-plugin": "^11.10.6",
"@emotion/babel-preset-css-prop": "^11.10.0",
"@emotion/css": "^11.10.6",
"@emotion/react": "^11.10.6",
"@emotion/styled": "^11.10.6",​

 

이렇게 했으나 안되고 결국 사용하는 해당파일 상단 import위에 이렇게 넣어줘야만 작동이 되었다. (설치되어있으면 주석만 있으면 작동)

/** @jsxImportSource @emotion/react */

 

알고보니, CRA는 바벨설정이 불가능하게 세팅되어 있어서

eject를 사용하게 되면 설정이 가능한데 그러면 CRA의 본질 자체를 잃어버리기 때문에 eject는 지양하고 craco를 사용해서 babel preset을 설정하도록 했던 것이다. 참고사이트

 

그런데 위에 설정대로 해도 주석없이는 적용이 안되고 인라인 css조금만 넣으려다가 많은 설정을 추가해야 되는 상황이라,

그냥 styled로 사용하기로 했다.

( 인라인 CSS를 사용하려면 설치 후 위에 주석을 넣어 사용하고,

그냥 styled로 사용하려면 주석없이도 설치만 되어있으면 사용 가능하다.)

 

styled 를 통한 컴포넌트 적용 예)

import styled from '@emotion/styled';

const Box = styled.div({
  display: 'flex',
  justifyContent: 'flex-end',
});

..
return(
 <Box />
 ..

 

https://okky.tistory.com/361

CRA(Create React App) 환경에서 Emotion 설치해서 사용하기

---

https://storycode.tistory.com/419

CRA.babel.webpack.설정

 

 

https://www.howdy-mj.me/css/emotionjs-intro

emotion.js 소개 및 사용법 (feat. CSS-in-JS)

https://velog.io/@qhgus/CRA-emotion.js-%ED%99%98%EA%B2%BD%EC%97%90%EC%84%9C-jsx-pragma-%EC%84%A0%EC%96%B8-%EC%97%86%EC%9D%B4-css-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0

CRA + emotion.js 환경에서 jsx pragma 선언 없이 css 사용하기

https://junglast.com/blog/react-new-jsx-transform-emotion

React의 새로운 JSX Transform 환경에서 Emotion CSS prop 사용 설정하기

https://simsimjae.tistory.com/410

emotion 사용시 jsx pragma 제거하기

https://rrecoder.tistory.com/237

@emotion/css error 에러 in React - you have tried to stringify object returned from css function

https://wazacs.tistory.com/14

React 스타일링 - emotion