react 引入antd 样式_react引入antd组件

1.antd官网：

https://ant.design/docs/react/introduce-cn

2、React中使用Antd

1、安装antd npm install antd --save / yarn add antd / cnpm install antd --save

2、在您的react项目的css文件中引入 Antd的css

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

3、看文档使用：

如使用Button：

1、在对应的组件中引入Antd import { Button } from 'antd';

2、Primary

3、React中使用Antd高级配置，按需引入css样式

我们现在已经把组件成功运行起来了，但是在实际开发过程中还有很多问题，例如上面的例子实际上加载了全部的 antd 组件的样式(对前端性能是个隐患)。

1、安装antd npm install antd --save

2、安装(react-app-rewired)一个对 create-react-app 进行自定义配置的社区解决方案

yarn add react-app-rewired / cnpm install react-app-rewired --save

3、修改 package.json

react-scripts 需改为react-app-rewired

"scripts": {

"start": "react-app-rewired start",

"build": "react-app-rewired build",

"test": "react-app-rewired test --env=jsdom",

"eject": "react-app-rewired eject"

}

4、安装babel-plugin-import babel-plugin-import是一个用于按需加载组件代码和样式的 babel 插件

yarn add babel-plugin-import / cnpm install babel-plugin-import --save

5、在项目根目录创建一个 config-overrides.js 配置文件

const { injectBabelPlugin } = require('react-app-rewired');

module.exports = function override(config, env) {

config = injectBabelPlugin(

['import', { libraryName: 'antd', libraryDirectory: 'es', style: 'css' }],

config,

);

return config;

};

7、然后移除前面在 src/App.css 里全量添加的 @import '~antd/dist/antd.css'; 直接引入组件使用就会有对应的css

import { Button } from 'antd';

Primary

react 引入antd 样式_react引入antd组件相关推荐

react内联样式_React样式化的组件：内联样式+ 3种其他CSS样式化方法（带有示例）...
react内联样式 There's no one right way to style your React components. It all depends on how complex you ...
引入react文件报错_react 引入react-thunk applyMiddleware(...middleware) 报错
学习react redux时引入react-thunk中间件报错报错信息项目是用和第,.年过事工宗据指数遍互业经搞断果会create-react-app抖要支圈者器说是事天开的.年后编定功口小发还 ...
React总结篇之六_React高阶组件
高阶组件的概念及应用以函数为子组件的模式这两种方式的最终目的都是为了重用代码,只是策略不同,各有优劣,开发者可以在实际工作中决定采用哪种方式. 一.高阶组件 1. 高阶组件(Higher Orde ...
react重新渲染菜单_React实现递归组件
前言今天来实现一个 React 的递归组件.具体的效果图如下: 图片说明假设后端返回的数据如下: [{ id: 1, parent_id: 0, name: '广东省', children: [{ ...
react 改变css样式_react怎么更改css样式
React点击/hover修改CSS样式 (1)点击修改样式方法一:(typescript写法)type state = { selected: boolean; }; class Measurem ...
react 日期怎么格式化_react日期格式化组件
最近在项目中经常碰到日期格式化的转化,如默认时间格式转换为"2020-02-02"或"2020-02-02"转换成"2020/02/02"等 ...
引入antd组件样式_create-react-app 实现 antd 的按需加载
按需加载 antd 的实现方式: 用 create-react-app 创建项目后,如果需要第三方的插件库,需要配置 webpack 配置文件,步骤如下: 首先运行 npm run eject 暴露出 ...
React学习：脚手架搭建、antd引入-学习笔记
文章目录 React学习:脚手架搭建.antd引入-学习笔记脚手架搭建项目目录结构 antd引入 antd附加:数据可放置的三个位置 React学习:脚手架搭建.antd引入-学习笔记脚手架搭建 ...
react slick安装后引入css样式报错
使用react-slick是为了在使用react hook的同时更加方便的实现轮播图. 因为看到antd组件库的走马灯太简单,不好复制,所以自以为找到了cv的好途径. 但,我不知道的是react-sl ...

react 引入antd 样式_react引入antd组件

react 引入antd 样式_react引入antd组件相关推荐

最新文章

热门文章