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

最新推荐文章于 2022-12-01 14:53:10 发布

原创最新推荐文章于 2022-12-01 14:53:10 发布 · 5.9k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#react #js

react 同时被 2 个专栏收录

34 篇文章

订阅专栏

css

29 篇文章

订阅专栏

博主在重构项目时，下载了antd包但样式未应用。经分析，是antd的css未应用上。解决办法是修改css引用，新建scss格式文件，如新建app.scss，刷新页面即可解决问题。

文章目录

一、问题详情
二、解决办法

一、问题详情

今天重构一个项目时，发现，下载了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