React之解决使用antd后样式没有显示

一、问题详情

今天重构一个项目时，发现，下载了antd的包但是antd的样式没有用上
在render函数中输出一个样式

const Login: FC<Props> = (): JSX.Element => {
  const handleOnFinish = useCallback((value: any) => {
    console.log(value)
  }, [])
  return (
    <div className={styles['login-div']}>
      <h1>用户登录</h1>
      <Button type="primary">Primary Button</Button>
      //....
    </div>
   )
 }

结果显示

二、解决办法

原因时antd的css没有应用上
需要修改app.tsx的css引用，这里我们新建格式为scss
代码如下：

import React from 'react'
import Router from './router/index'
import './App.scss'

function App() {
  return (
    <div className="App">
      <Router></Router>
    </div>
  )
}

export default App

新建app.scss，内容如下

@import '~antd/dist/antd.css';

再刷新页面就OK了