在使用Create React App创建的React环境中导入Emotion的步骤是什么？

2 年 ago

科, 颖

2 minutes

Emotion是CSS in JS的框架。
以下是将Emotion引入Create React App创建的React环境的步骤摘要。

执行Create React App

首先执行以下命令，设置React环境。

npx create-react-app プロジェクト名 --template typescript

情感补充

按照以下公式，在命令中添加Emotion。
根据以下公式，在命令中加入Emotion。

npm i @emotion/react

找到合适的风格

编写所需样式

应用所编写的样式

import React from 'react';
import logo from './logo.svg';
import './App.css';
import { css } from '@emotion/react';  // 1

// 2
const link = css`
  background-color: red;
` 

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
          css={link}  // 3
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

然而，仅仅这样做会显示以下错误，因此需要添加设置才能应用样式。

需要编写JSX Pragma声明。

JSX Pragma 的描述

根据公式，在需要使用Emotion的文件中加入/** @jsxImportSource @emotion/react */这段描述。

/** @jsxImportSource @emotion/react */
import React from 'react';
import logo from './logo.svg';
import './App.css';
import { css } from '@emotion/react';
省略

您可以使用这个功能通过Emotion来调整风格。

如果每次都要写JSX Pragma很麻烦的话

通过添加CRACO，可以省去许多麻烦。

CRACO是一个用于自定义React环境设置的库。

首先安装CRACO。

npm i @craco/craco

接下来，在项目根目录下创建 craco.config.js 文件。

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

进一步将package.json的scripts更改如下：
通过这个更改，您将能够通过CRACO进行构建等操作。

"scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
}

在最后，我们需要向tsconfig.json文件的compilerOptions下添加以下内容。

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

不需要在上面添加/** @jsxImportSource @emotion/react */的情况下，也可以使用Emotion来应用样式。

import React from 'react';
import logo from './logo.svg';
import './App.css';
import { css } from '@emotion/react';

const link = css`
  background-color: red;
` 

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
          css={link}
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

执行Create React App

情感补充

找到合适的风格

JSX Pragma 的描述

如果每次都要写JSX Pragma很麻烦的话

请参考