【踩坑笔记】Antd在移动端样式没有显示

一、问题描述

Antd的样式在PC端好好的，和官网一致，但是在移动设备上就变成一片白茫茫的默认样式，怀疑是没有样式。
项目主要使用React + Antd + cra脚手架（模板用cra-template-typescript）。观察了一下感觉不是模板的问题。

二、踩坑过程

先在Chrome浏览器F12，换了Device测一下，还是白茫茫的。看了眼发现Network拿到的样式内容好少不太对劲，然后看了一眼build的东西发现应该是少了Antd的.css文件。（这里有个疑惑，PC端拿到的样式也没有Antd的，为啥就能显示呢？）

首先谷歌了几篇博客[1,2]，都是在说在App.tsx里import “antd/dist/antd.css”;。我照做了，但是发现新版的Antd没有这个文件。

在同目录下发现另一个css文件，抱着侥幸心理试了一下import “antd/dist/reset.css”;，依然不行。

然后继续浏览搜索antd.css相关的内容，发现大家[3,4]都在说降版本到4.x就可以解决。

三、解决方法

既然降版本有效，那么直接查看官网更新日志，看看新版本更了什么导致找不到antd.css文件了。
先搜索“样式”，找到这一条

🗑 移除 dist/antd.css 产物。默认不再入侵全局样式，新增 dist/reset.css 用于重置部分常见样式。#36224

然后请教了一位百万前端朋友，告诉我可能是5.x用css-in-js，而我的移动端不支持这个。
OK，那还是降版本吧

# 看一眼antd的版本都有啥
npm view antd versions

# 我这里发现4.24.6是4.x的最后一个版本，于是安装
npm install antd@4.24.6 --save

问题解决。