styled-components/macro 在 CRA 项目中无法生成可读 classNames 问题求助

• 首先修正导入路径：CRA 内置的 babel macro 仅对指定 macro 入口的导入生效，你需要将项目中所有 import styled from 'styled-components' 语句替换为 import styled from 'styled-components/macro'，配套的 useTheme 等相关 API 也需要从 /macro 入口导入。
• 确认根目录下的 babel-plugin-macros.config.js 配置格式正确，参考配置如下：

module.exports = {
  styledComponents: {
    displayName: true,
    // 可选开启fileName配置，class名会同时携带文件名信息，可读性更强
    fileName: true
  }
}

• 依赖校验：确认项目已经安装 styled-components 和 babel-plugin-styled-components 两个依赖，缺失的话执行npm i styled-components babel-plugin-styled-components -S安装即可。
• 重启开发服务：修改配置后需要结束当前 npm start 进程，重新启动开发服务并清空浏览器缓存后，即可看到带组件名的可读性 classNames。

本方案全程不需要 eject 暴露 CRA 内置配置，兼容 CRA 2.0 及以上所有正式版本。

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