在Create React App中用styled-jsx遇模板字面量未转译错误求解决

嘿，我刚碰到过类似的问题，来帮你捋清楚！你看到的这个转译错误，核心原因是styled-jsx需要专门的Babel插件来处理它的CSS模板字面量，但Create React App（CRA）的默认配置里并没有包含这个插件。另外你的代码里还有几个小细节需要调整，我一步步给你说：

第一步：先修正组件代码里的问题 #

你当前的代码里，用css标签定义了button变量，但在<style jsx>里直接引用它的方式不对。styled-jsx有两种常用的写法，你可以选一种：

写法1：直接内联样式（适合简单组件） #

不用单独引入css模块，直接把样式写在<style jsx>里就行：

import React from 'react';

export default function MyComponent(props) {
  return (
    <>
      <div key={props.value}>{props.label}</div>
      <style jsx>{`
        div {
          color: hotpink;
        }
      `}</style>
    </>
  )
}

写法2：使用css模板字面量（适合样式复用） #

如果需要把样式抽离出来复用，要给元素加上对应的className，然后在<style jsx>里引用样式变量：

import React from 'react';
import css from 'styled-jsx/css'

export default function MyComponent(props) {
  return (
    <>
      <div key={props.value} className={styles.highlight}>{props.label}</div>
      <style jsx>{styles.highlight}</style>
    </>
  )
}

const styles = css`
  .highlight {
    color: hotpink;
  }
`;

第二步：配置CRA支持styled-jsx的转译 #

因为CRA默认不支持styled-jsx的Babel转译，我们需要用react-app-rewired来修改配置（不用eject，更安全）：

1. 安装依赖：

npm install styled-jsx react-app-rewired customize-cra --save-dev

2. 修改package.json里的scripts，把react-scripts替换成react-app-rewired：

"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test",
  "eject": "react-scripts eject"
}

3. 在项目根目录新建config-overrides.js文件，添加styled-jsx的Babel插件：

const { override, addBabelPlugin } = require('customize-cra');

module.exports = override(
  addBabelPlugin('styled-jsx/babel')
);

为什么会出现这个错误？ #

简单来说，styled-jsx的css标签并不是原生JavaScript语法，它需要Babel插件把这些模板字面量转换成React能识别的样式处理逻辑。CRA的默认Babel配置没有包含这个插件，所以就会报错说“你的CSS模板字面量没有被转译”。

做完上面的步骤，重启你的开发服务器，应该就能正常运行了！

内容的提问来源于stack exchange，提问作者Alejandroid